<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <el-image
            :src="iconfh"
            fit="contain"
            style="position: absolute; left: 1%; top: 2.5%; z-index: 99"
            @click="returnIndex"
          ></el-image>
          <el-image :src="iconzbt" fit="contain"></el-image>
          <!-- <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">智慧·环卫固废监管场景</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />  
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" /> -->
        </div>

        <!-- 第二行 -->
        <!-- <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
          <div class="d-flex aside-width">
          </div>
          <div class="d-flex aside-width">
          </div>
          <div class="d-flex aside-width">
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
        </div> -->

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div class="one">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">环卫固废总览 </span>
                  </div>
                </div>

                <div
                  style="
                    width: 350px;
                    height: 260px;
                    margin-top: 20px;
                    float: left;
                  "
                >
                  <el-row :gutter="12" style="margin: 2% 0">
                    <el-col :span="12">
                      <el-card shadow="always">
                        <div class="ht">作业车辆在线</div>
                        <div class="hd">
                          {{ staticInfo.vehicleOnline }}
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="12">
                      <el-card shadow="always">
                        <div class="ht">清运车辆在线</div>
                        <div class="hd">
                          {{ staticInfo.vehicleLJOnline }}
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row :gutter="12" style="margin: 2% 0">
                    <el-col :span="12">
                      <el-card shadow="always">
                        <div class="ht">收集点在线</div>
                        <div class="hd">4/4</div>
                      </el-card>
                    </el-col>
                    <el-col :span="12">
                      <el-card shadow="always">
                        <div class="ht">智慧公厕在线</div>
                        <div class="hd">2/2</div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  id="WorkOnStandard_ONE"
                  style="width: 270px; height: 250px; float: left"
                ></div>
                <div
                  style="
                    width: 47%;
                    height: 260px;
                    margin-top: 70px;
                    margin-left: 30px;
                    float: left;
                  "
                >
                  <el-row>
                    <el-col :span="5"
                      ><div class="bg-purple10">
                        <el-image :src="icon1"></el-image></div
                    ></el-col>
                    <el-col :span="4"
                      ><div class="bg-purple10">
                        <div class="gftd">当日垃圾收运</div>
                        <div class="gfth">
                          {{ staticInfo.rubbishCollection }}吨
                        </div>
                        <el-image :src="icon4" fit="contain"></el-image></div
                    ></el-col>
                    <el-col :span="5"
                      ><div class="bg-purple10">
                        <el-image :src="icon2"></el-image></div
                    ></el-col>
                    <el-col :span="4"
                      ><div class="bg-purple10">
                        <div class="gftd">当日累计处置</div>
                        <div class="gfth">{{ staticInfo.rubbishBurn }}吨</div>
                        <el-image :src="icon4" fit="contain"></el-image></div
                    ></el-col>
                    <el-col :span="5"
                      ><div class="bg-purple10">
                        <el-image :src="icon3"></el-image></div
                    ></el-col>
                  </el-row>
                  <!-- <el-image :src="icon1" fit="contain"></el-image>
                  <span class="ht"
                    >{{ staticInfo.rubbishCollection }}<br>垃圾收运</span
                  >
                  <el-image :src="icon4" fit="contain"></el-image>
                  <el-image :src="icon2" fit="contain"></el-image>
                  <span class="ht">累计处置{{ staticInfo.rubbishBurn }}</span>
                  <el-image :src="icon4" fit="contain"></el-image>
                  <el-image :src="icon3" fit="contain"></el-image> -->
                </div>
              </dv-border-box-7>
            </div>
            <!-- 地图 -->
            <div class="two">
              <div style="width: 100%; height: 100%">
                <div style="width: 100%; height: 100%" id="map"></div>
                <div class="map-Checkbox">
                  <div style="margin-top: 25px">
                    <el-input
                      placeholder="请输入车牌号码"
                      v-model="valueSearchCar"
                    >
                      <el-button slot="append" @click="searchCar"
                        >搜索</el-button
                      >
                    </el-input>
                    <!-- <el-checkbox v-model="checked">在线</el-checkbox> -->
                    <div style="line-height: 3">
                      <el-switch
                        v-model="showOnlyOnline"
                        active-color="#1ba7dd"
                        @change="changeShowOnlyOnline()"
                      >
                      </el-switch>
                      只显示在线车辆
                    </div>
                  </div>
                  <div style="margin-top: 25px">
                    <el-image
                      :src="iconbj"
                      fit="contain"
                      @click="openWarningDetails"
                    ></el-image>
                  </div>
                  <div style="margin-top: 25px">
                    <el-image
                      :src="iconsj"
                      fit="contain"
                      @click="openWarningDetailsAll"
                    ></el-image>
                  </div>
                  <div style="margin-top: 25px">
                    <el-popover
                      placement="right"
                      width="250"
                      v-model="isVisibleCarCount"
                      trigger="click"
                    >
                      <el-table
                        :data="carCountData"
                        size="mini"
                        @row-click="clickRowCarCount"
                        style="width: 230px"
                      >
                        <el-table-column
                          width="110"
                          property="car"
                          label="类型"
                        ></el-table-column>
                        <el-table-column
                          width="60"
                          property="online"
                          label="在线数"
                        ></el-table-column>
                        <el-table-column
                          width="50"
                          property="count"
                          label="总数"
                        ></el-table-column>
                      </el-table>
                      <img
                        src="http://111.160.78.62:4514/0IMAGE/icon_carCount.png"
                        slot="reference"
                      />

                      <!-- <el-button slot="reference"  type="primary" icon="el-icon-truck"></el-button> -->
                    </el-popover>
                    <!-- <el-image
                      :src="imgiconcc"
                      fit="contain"
                      @click="isShowMapVideo = true"
                    ></el-image> -->
                  </div>
                  <div style="margin-top: 25px" v-if="!isShowMapVideo">
                    <el-image
                      :src="iconjs"
                      fit="contain"
                      @click="isShowMapVideo = true"
                    ></el-image>
                  </div>
                </div>

                <div class="dikuangVideo" v-if="isShowMapVideo">
                  <div class="videoBtn" style="top: 0px" @click="videoShow(0)">
                    <p class="videoTitle">垃圾收集点监控</p>
                  </div>
                  <div
                    class="videoBtn"
                    style="top: 155px"
                    @click="videoShow(1)"
                  >
                    <p class="videoTitle">垃圾清运车监控</p>
                  </div>
                  <div
                    class="videoBtn"
                    style="top: 308px"
                    @click="videoShow(2)"
                  >
                    <p class="videoTitle">作业车辆监控</p>
                  </div>
                  <div
                    class="videoBtn"
                    style="top: 464px"
                    @click="videoShow(3)"
                  >
                    <p class="videoTitle">智慧公厕监控</p>
                  </div>
                  <iframe
                    :src="url1"
                    frameborder="0"
                    width="100%"
                    height="150px"
                  ></iframe>
                  <iframe
                    :src="url2"
                    frameborder="0"
                    width="100%"
                    height="150px"
                  ></iframe>
                  <iframe
                    :src="url3"
                    frameborder="0"
                    width="100%"
                    height="150px"
                  ></iframe>
                  <iframe
                    :src="url4"
                    frameborder="0"
                    width="100%"
                    height="150px"
                  ></iframe>
                  <el-button
                    style="float: right"
                    type="primary"
                    size="mini"
                    @click="isShowMapVideo = false"
                    >关闭</el-button
                  >
                </div>

                <div class="dikuangCar">
                  <div
                    class="nature"
                    style="left: 0px"
                    @click="mapMarkerShowHideXS"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarXS ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    洗扫车
                  </div>
                  <div
                    class="nature"
                    style="left: 10px"
                    @click="mapMarkerShowHideWP"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarWP ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    雾炮车
                  </div>
                  <div
                    class="nature"
                    style="left: 20px"
                    @click="mapMarkerShowHideSS"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarSS ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    洒水车
                  </div>
                  <div
                    class="nature"
                    style="left: 30px"
                    @click="mapMarkerShowHideLJ"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarLJ ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    垃圾清运车
                  </div>
                  <div
                    class="nature"
                    style="left: 40px"
                    @click="mapMarkerShowHideKSJS"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarKSJS ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    快速拾捡车
                  </div>
                  <div
                    class="nature"
                    style="left: 50px"
                    @click="mapMarkerShowHideXSD"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarXSD ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    小型作业车
                  </div>
                  <div
                    class="nature"
                    style="left: 60px"
                    @click="mapMarkerShowHideXCX"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarXCX ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    重型转运车
                  </div>
                  <div
                    class="nature"
                    style="left: 70px"
                    @click="mapMarkerShowHideXZY"
                    v-if="btnAction.mapCar"
                    v-bind:class="
                      btnAction.mapCarXZY ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    小三轮转运车
                  </div>
                </div>
                <div class="dikuang">
                  <div
                    class="nature"
                    style="left: 300px"
                    @click="mapMarkerShowHideRubbish"
                    v-bind:class="
                      btnAction.mapRubbish ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    垃圾收集点
                  </div>
                  <div
                    class="nature"
                    style="left: 310px"
                    @click="mapMarkerShowHideWorker"
                    v-bind:class="
                      btnAction.mapWorker ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    人员
                  </div>
                  <div
                    class="nature"
                    style="left: 320px"
                    @click="mapMarkerShowHideCar"
                    v-bind:class="
                      btnAction.mapCar ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    车辆
                  </div>
                  <div
                    class="nature"
                    style="left: 330px"
                    @click="mapMarkerShowHideWC"
                    v-bind:class="
                      btnAction.mapWC ? 'carbtnImageA' : 'carbtnImageU'
                    "
                  >
                    公厕
                  </div>
                </div>
              </div>
            </div>

            <div class="three">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">事件报警</span>
                  </div>
                </div>

                <el-button
                  type="text"
                  style="
                    color: #71c9ee;
                    position: absolute;
                    right: 2%;
                    top: 0.5%;
                    z-index: 99;
                  "
                  @click="openAlarmDetails"
                  >更多<i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
                <div style="margin: 10px 20px">
                  <dv-scroll-board
                    :config="config2"
                    style="width: 600px; height: 400px"
                    @click="openWarningAlarm"
                  />
                </div>
                <!-- <div
                  id="WorkOnStandard_THREE"
                  style="width: 98%; height: 300px;"
                ></div> -->
              </dv-border-box-7>
            </div>

            <div class="four">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title" style="float: left">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">垃圾收运TOP3</span>
                  </div>
                </div>

                <el-button-group
                  style="
                    position: absolute;
                    right: 50%;
                    z-index: 99;
                    margin-top: 5px;
                  "
                >
                  <el-button
                    type="primary"
                    v-for="(item, index) in mapOperationsSummary"
                    size="mini"
                    :key="index"
                    @click="initWorkOnStandard_FOUR(index)"
                    >{{ item.name }}
                  </el-button>
                </el-button-group>
                <div
                  class="d-flex pt-2 pl-2 title"
                  style="float: right; margin: 0 0 10px 0"
                >
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">实时收运情况</span>
                  </div>
                </div>
                <div
                  id="WorkOnStandard_FOUR"
                  style="width: 50%; height: 270px; float: left"
                ></div>

                <div style="float: right; margin: 0 10px">
                  <dv-scroll-board
                    :config="config1"
                    style="width: 600px; height: 245px"
                  />
                </div>
              </dv-border-box-7>
            </div>
            <div class="five">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">智慧公厕数据监控</span>
                  </div>
                </div>

                <!-- <div
                  id="WorkOnStandard_RL"
                  style="width: 98%; height: 450px"
                ></div> -->

                <el-select
                  size="medium"
                  v-model="wcID"
                  placeholder="请选择"
                  @change="changeWCIDValue()"
                  style="
                    width: 200px;
                    position: absolute;
                    right: 5%;
                    top: 1%;
                    z-index: 99;
                  "
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in wcList"
                    :key="item.ID"
                    :label="item.NAME"
                    :value="item.ID"
                  >
                  </el-option>
                </el-select>
                <el-button-group
                  style="position: absolute; right: 59%; top: 10%; z-index: 99"
                >
                  <el-button
                    type="primary"
                    v-for="(item, index) in WCSummary"
                    size="mini"
                    :key="index"
                    @click="changeWCSummaryValue(index)"
                    >{{ item.name }}
                  </el-button>
                </el-button-group>

                <div
                  :id="this.changeWCValue"
                  style="width: 98%; height: 450px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="six">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">环卫作业情况</span>
                  </div>
                </div>
                <div style="float: left">
                  <div class="configwater">
                    <dv-water-level-pond
                      :config="configwater1"
                      style="width: 150px; height: 140px"
                    />
                    <div class="twater">洒水车</div>
                    <div class="twater">{{ staticInfo.vehicleWorkLongSS }}</div>
                    <div class="twater">
                      作业标准里程：{{ staticInfo.vehicleWorkStandardSS }}公里
                    </div>
                  </div>
                  <div class="configwater">
                    <dv-water-level-pond
                      :config="configwater2"
                      style="width: 150px; height: 140px"
                    />
                    <div class="twater">洗扫车</div>
                    <div class="twater">{{ staticInfo.vehicleWorkLongXS }}</div>
                    <div class="twater">
                      作业标准里程：{{ staticInfo.vehicleWorkStandardXS }}公里
                    </div>
                  </div>
                  <div class="configwater">
                    <dv-water-level-pond
                      :config="configwater3"
                      style="width: 150px; height: 140px"
                    />
                    <div class="twater">雾炮车</div>
                    <div class="twater">{{ staticInfo.vehicleWorkLongWP }}</div>
                    <div class="twater">
                      作业标准里程：{{ staticInfo.vehicleWorkStandardWP }}公里
                    </div>
                  </div>
                </div>

                <el-button-group
                  style="
                    position: absolute;
                    right: 2%;
                    z-index: 99;
                    margin-top: -10px;
                  "
                >
                  <el-button
                    type="primary"
                    v-for="(item, index) in mapOperationsSummary"
                    size="mini"
                    :key="index"
                    @click="initWorkOnStandard_SIX(index)"
                    >{{ item.name }}
                  </el-button>
                </el-button-group>

                <div
                  id="WorkOnStandard_SIX"
                  style="width: 48%; height: 300px; float: left"
                ></div>
                <!-- <div
                  id="WorkOnStandard_XS"
                  style="width: 98%; height: 300px;"
                ></div> -->
              </dv-border-box-7>
            </div>

            <div class="seven">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title" style="float: left">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">事件报警统计</span>
                  </div>
                </div>

                <!-- <div
                  class="d-flex pt-2 pl-2 title"
                  style="float: right; margin: 0 0 10px 0"
                >
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">公厕运行统计 </span>
                  </div>
                </div> -->

                <el-button-group
                  style="
                    position: absolute;
                    right: 2%;
                    z-index: 99;
                    margin-top: 10px;
                  "
                >
                  <el-button
                    type="primary"
                    v-for="(item, index) in mapOperationsSummary"
                    size="mini"
                    :key="index"
                    @click="initWorkRatioByCartype(index)"
                    >{{ item.name }}
                  </el-button>
                </el-button-group>

                <div
                  id="WorkRatioByCartype"
                  style="width: 100%; height: 300px; float: left"
                ></div>

                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="bg-purple10">
                      <el-image :src="iconwbj"></el-image></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="bg-purple10">
                      <el-image :src="iconbjz"></el-image></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="bg-purple10">
                      <el-image :src="iconybj"></el-image></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"><div class="wctd1">未办结</div></el-col>
                  <el-col :span="8"><div class="wctd1">办结中</div></el-col>
                  <el-col :span="8"><div class="wctd1">已办结</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="wcth1">{{ AlarmInfo.AlarmWBJ }}件</div></el-col
                  >
                  <el-col :span="8"
                    ><div class="wcth1">{{ AlarmInfo.AlarmBJZ }}件</div></el-col
                  >
                  <el-col :span="8"
                    ><div class="wcth1">{{ AlarmInfo.AlarmYBJ }}件</div></el-col
                  >
                </el-row>
              </dv-border-box-7>
            </div>
            <div class="eight">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">公厕运行统计</span>
                  </div>
                </div>
                <el-button
                  type="text"
                  style="
                    color: #71c9ee;
                    position: absolute;
                    right: 10%;
                    top: 1%;
                    z-index: 99;
                  "
                  @click="openWcDetails"
                  >更多<i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
                <div class="wcone">
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4"></div
                    ></el-col>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        {{ wcstaticInfo.wc1 }}
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        {{ wcstaticInfo.wc2 }}
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image class="wcimg" :src="iconkw"></el-image
                        >坑位情况
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple7">
                        {{ wcstaticInfo.placeCount1 }}
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple7">
                        {{ wcstaticInfo.placeCount2 }}
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image class="wcimg" :src="iconwd"></el-image
                        >温度指标
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple9">
                        {{ wcstaticInfo.wd1 }} ℃
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple9">
                        {{ wcstaticInfo.wd2 }} ℃
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image class="wcimg" :src="iconsd"></el-image
                        >湿度指标
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple9">
                        {{ wcstaticInfo.sd1 }} %RH
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple9">
                        {{ wcstaticInfo.sd2 }} %RH
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image class="wcimg" :src="iconaq"></el-image
                        >氨气指标
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple8">
                        {{ wcstaticInfo.aq1 }} mg/m³
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple8">
                        {{ wcstaticInfo.aq2 }} mg/m³
                      </div></el-col
                    >
                  </el-row>
                  <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image class="wcimg" :src="iconlhq"></el-image
                        >硫化氢指标
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple8">
                        {{ wcstaticInfo.lhq1 }} mg/m³
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple8">
                        {{ wcstaticInfo.lhq2 }} mg/m³
                      </div></el-col
                    >
                  </el-row>
                  <!-- <el-row>
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple4">
                        <el-image
                          class="wcimg"
                          :src="iconpm"
                         
                        ></el-image
                        >PM2.5指标
                      </div></el-col
                    >
                    <el-col :span="6" :offset="2"
                      ><div class="bg-purple7">0.01mg/m³</div></el-col
                    >
                  </el-row> -->

                  <el-image
                    class="xlimg"
                    :src="iconxl"
                    fit="contain"
                  ></el-image>
                  <el-row :gutter="20">
                    <el-col :span="8"><div class="wctd1">当日人流</div></el-col>
                    <el-col :span="8"><div class="wctd1">当日耗水</div></el-col>
                    <el-col :span="8"><div class="wctd1">当日耗电</div></el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="8"
                      ><div class="wcth1">
                        {{ wcstaticInfo.todayRL }}人
                      </div></el-col
                    >
                    <el-col :span="8"
                      ><div class="wcth1">
                        {{ wcstaticInfo.todayHS }}吨
                      </div></el-col
                    >
                    <el-col :span="8"
                      ><div class="wcth1">
                        {{ wcstaticInfo.todayHD }}度
                      </div></el-col
                    >
                  </el-row>
                </div>
              </dv-border-box-7>
            </div>

            <!-- <div class="nine">
              <dv-border-box-7 :color="['#112333', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">监控视频</span>
                  </div>
                </div>

                <div style="width: 98%; height: 300px">
                  <iframe
                    :src="url1"
                    style="margin: 20px 5px 20px 15px"
                    frameborder="0"
                    width="32%"
                    height="98%"
                  ></iframe>
                  <iframe
                    :src="url2"
                    style="margin: 20px 5px"
                    frameborder="0"
                    width="32%"
                    height="98%"
                  ></iframe>
                  <iframe
                    :src="url3"
                    style="margin: 20px 5px"
                    frameborder="0"
                    width="32%"
                    height="98%"
                  ></iframe>
                </div>
              </dv-border-box-7>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 车辆列表 -->
    <el-dialog
      :modal="false"
      title="车辆列表"
      :visible.sync="isVisibleTypeCar"
      :default-sort="{ prop: 'STATUSstr', order: 'descending' }"
      width="700px"
    >
      <div>
        <el-table
          :data="carDataForType"
          style="width: 100%"
          stripe
          class="customer-table"
        >
          <el-table-column
            prop="LICENSEPLATE"
            label="车牌号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="img"
            label="车辆类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="STATUSstr"
            label="在线状态"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 车辆轨迹回放控弹出框 -->
    <el-dialog
      v-loading="loadingDialog"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :modal="false"
      @open="dialogOpenMap"
      :title="dialogTitlePlayback"
      :visible.sync="isVisibleMapPlayback"
      width="30%"
      :before-close="dialogCloseMap"
    >
      <div style="width: 100%; height: 500px">
        <el-date-picker
          v-model="datePlayback"
          type="date"
          value-format="yyyy-MM-dd"
          @change="getPlayback"
          placeholder="选择日期"
        >
        </el-date-picker>
        <div
          style="width: 100%; height: 90%; margin-top: 20px"
          id="mapDialog"
        ></div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleMapPlayback = false">取 消</el-button>
        <el-button type="primary" @click="isVisibleMapPlayback = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
    <!-- 报警事件弹出框 -->
    <el-dialog :modal="false" title="" :visible.sync="isVisibleSj" width="30%">
      <div>
        <el-table
          :data="detailsData"
          style="width: 100%"
          height="620"
          stripe
          class="customer-table"
        >
          <el-table-column
            prop="ID"
            label="任务号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="TYPE"
            label="事件报警"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="大类"
            label="大类"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="小类"
            label="小类"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="问题简述"
            label="问题简述"
            width="350"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="状态"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="openWarningAlarm1(scope.row)"
                style="color: #cfc24a"
                >详情</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="上报时间"
            label="上报时间"
            align="center"
            width="150"
          ></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 报警事件20条弹出框 -->
    <el-dialog
      :modal="false"
      title=""
      :visible.sync="isVisibleAlarm20"
      width="30%"
    >
      <div>
        <el-table
          :data="alarmDetail20List"
          style="width: 100%"
          height="620"
          stripe
          class="customer-table"
        >
          <el-table-column
            prop="ID"
            label="ID"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="状态"
            label="类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="时间"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="内容"
            label="内容"
            width="350"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="openWarningAlarm1(scope.row)"
                style="color: #cfc24a"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 报警详情弹出框 -->
    <el-dialog
      :modal="false"
      title="报警详情"
      :visible.sync="isVisibleXq"
      width="30%"
    >
      <div>
        <el-row>
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">报警对象</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">{{ alarmData[0].报警对象 }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">报警内容</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">{{ alarmData[0].报警内容 }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">报警位置</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">{{ alarmData[0].LOCATION }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">处理状态</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">{{ alarmData[0].处理状态 }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">报警时间</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">{{ alarmData[0].报警时间 }}</div></el-col
          >
        </el-row>
        <el-row v-if="alarmData[0].报警图片">
          <el-col :span="8" :offset="2"
            ><div class="bg-purple11">报警图片</div></el-col
          >
          <el-col :span="12"
            ><div class="bg-purple11">
              <el-image
                style="width: 145px; height: 145px; margin-top: 5px"
                :src="alarmData[0].报警图片"
                @click="bigImage()"
              >
                <div slot="error" class="image-slot" style="margin-top: 10px">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image></div
          ></el-col>
        </el-row>
        <el-row v-else>
          <div style="height: 200px"></div>
        </el-row>
      </div>
    </el-dialog>
    <!-- 车辆视频监控弹出框 -->
    <el-dialog
      :title="dialogTitleCarVideo"
      :visible.sync="isVisibleCarVideo"
      width="30%"
      :modal="false"
    >
      <span>
        <iframe :src="urlDialogCar" width="100%" height="640px"></iframe>
      </span>
      <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="isVisibleCarVideo = false">取 消</el-button>
    <el-button type="primary" @click="isVisibleCarVideo = false">确 定</el-button>
  </span> -->
    </el-dialog>
    <!-- 侧边栏 视频监控弹出框 -->
    <el-dialog
      title="视频监控"
      :visible.sync="isVisibleCCTV"
      width="25%"
      :modal="false"
    >
      <el-tabs v-model="carTabsValue" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in carTabs"
          :key="item.did"
          :label="item.vid"
          :name="item.did"
        >
        </el-tab-pane>
      </el-tabs>
      <iframe :src="urlDialog" width="100%" height="540px"></iframe>
      <!-- <span>
        
      </span> -->
      <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="isVisibleCarVideo = false">取 消</el-button>
    <el-button type="primary" @click="isVisibleCarVideo = false">确 定</el-button>
  </span> -->
    </el-dialog>
    <!-- 厕所信息弹出框 -->
    <el-dialog
      title="公厕运行看板"
      :visible.sync="isVisibleWc"
      width="50%"
      :modal="false"
    >
      <div class="wcbox">
        <div class="wcfour">
          <el-tabs v-model="wcTabsValue" @tab-click="handleWcClick">
            <el-tab-pane
              v-for="item in wcTabs"
              :key="item.ID"
              :label="item.NAME"
              :name="item.ID"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="wcone">
          <div style="margin: 45px"></div>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple1">
                <el-image class="wcimg" :src="iconnan"></el-image>男厕
              </div></el-col
            >
            <el-col :span="8"><div class="bg-purple2">剩余坑位</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple3">{{ wcDialogInfo.manstate }}</div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconwd"></el-image>温度
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.manWD }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">℃</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconsd"></el-image>湿度
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.manSD }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">%RH</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconaq"></el-image>氨气
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.manAQ }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">mg/m³</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconlhq"></el-image>硫化氢
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.manLHQ }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">mg/m³</div></el-col>
          </el-row>
          <div style="margin: 45px"></div>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple1">
                <el-image class="wcimg" :src="iconnv"></el-image>女厕
              </div></el-col
            >
            <el-col :span="8"><div class="bg-purple2">剩余坑位</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple3" style="color: #ee5454">
                {{ wcDialogInfo.womanstate }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconwd"></el-image>温度
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.womanWD }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">℃</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconsd"></el-image>湿度
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.womanSD }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">%RH</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconaq"></el-image>氨气
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.womanAQ }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">mg/m³</div></el-col>
          </el-row>
          <div></div>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple4">
                <el-image class="wcimg" :src="iconlhq"></el-image>硫化氢
              </div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.womanLHQ }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple4">mg/m³</div></el-col>
          </el-row>
        </div>
        <div class="wctwo">
          <el-image
            :src="iconwc"
            style="transform: translate(-50%, -50%); top: 50%; left: 50%"
            fit="contain"
          ></el-image>
        </div>
        <div class="wcthree">
          <h3 style="color: #fff; margin: 0 0 15px">当月累计总人流量</h3>
          <div>
            <dv-border-box-7 :color="['#0e4861', '#1BA7DD']">
              <el-row>
                <el-col :span="8" :offset="8"
                  ><div class="wcth">{{ wcDialogInfo.rllAll }}</div></el-col
                >
                <el-col :span="8"><div class="wctd">人</div></el-col>
              </el-row>
            </dv-border-box-7>
          </div>
          <el-row>
            <el-col :span="8"
              ><div class="bg-purple6">当日总人流量</div></el-col
            >
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.rllToday }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple6">人</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><div class="bg-purple6">女厕人流量</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.rllwoman }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple6">人</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><div class="bg-purple6">男厕人流量</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.rllman }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple6">人</div></el-col>
          </el-row>
          <h3 style="color: #fff; margin: 0 0 15px">当月累计用电量</h3>
          <div>
            <dv-border-box-7 :color="['#0e4861', '#1BA7DD']">
              <el-row>
                <el-col :span="8" :offset="8"
                  ><div class="wcth">{{ wcDialogInfo.dlAll }}</div></el-col
                >
                <el-col :span="8"><div class="wctd">度</div></el-col>
              </el-row>
            </dv-border-box-7>
          </div>
          <el-row>
            <el-col :span="8"><div class="bg-purple6">当日用电量</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.dlToday }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple6">度</div></el-col>
          </el-row>
          <h3 style="color: #fff; margin: 0 0 15px">当月累计用水量</h3>
          <div>
            <dv-border-box-7 :color="['#0e4861', '#1BA7DD']">
              <el-row>
                <el-col :span="8" :offset="8"
                  ><div class="wcth">{{ wcDialogInfo.slAll }}</div></el-col
                >
                <el-col :span="8"><div class="wctd">吨</div></el-col>
              </el-row>
            </dv-border-box-7>
          </div>
          <el-row>
            <el-col :span="8"><div class="bg-purple6">当日用水量</div></el-col>
            <el-col :span="8"
              ><div class="bg-purple5">{{ wcDialogInfo.slToday }}</div></el-col
            >
            <el-col :span="8"><div class="bg-purple6">吨</div></el-col>
          </el-row>
          <h3 style="color: #fff; margin: 0 0 15px">满意度</h3>
          <div>
            <dv-border-box-7 :color="['#0e4861', '#1BA7DD']">
              <el-row>
                <el-col :span="8"><div class="wctd">非常满意</div></el-col>
                <el-col :span="8"><div class="wctd">满意</div></el-col>
                <el-col :span="8"><div class="wctd">一般</div></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"
                  ><div class="wcth">{{ wcDialogInfo.myMOST }}</div></el-col
                >
                <el-col :span="8"
                  ><div class="wcth">{{ wcDialogInfo.myMUCH }}</div></el-col
                >
                <el-col :span="8"
                  ><div class="wcth">{{ wcDialogInfo.myMOD }}</div></el-col
                >
              </el-row>
            </dv-border-box-7>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 图片放大 -->
    <el-dialog
      :modal="false"
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-image style="width: 100%; height: 100%" :src="srcBig"></el-image>
    </el-dialog>
  </div>
</template>
<script type="text/javascript" src="@/public/mapv.min.js"></script>
<script>
import imgWC from '@/assets/img/MapMarkerCD/公厕.png'
import imgLJ from '@/assets/img/MapMarkerCD/垃圾收集点.png'
import imgEnd from '@/assets/img/MapMarkerCD/end3.png'
import imgStart from '@/assets/img/MapMarkerCD/begin3.png'
import { newMap } from '@/common/map/map.js'
import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { optionWorkOnStandard3 } from '@/components/echart/bar.js'
import { optionWorkOnStandard4 } from '@/components/echart/bar.js'
import { optionWorkOnStandard5 } from '@/components/echart/bar.js'
import { collectionRate4 } from '@/components/echart/bar.js'
// import { spotsNumbeH4 } from '@/components/echart/bar.js'
import { spotsNumbeH3 } from '@/components/echart/bar.js'
import { brokenLine } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { dashBoard } from '@/components/echart/bar.js'

import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import imgicon1 from '@/assets/img/KanBan/hwgfzl_icon_1.png'
import imgicon2 from '@/assets/img/KanBan/hwgfzl_icon_2.png'
import imgicon3 from '@/assets/img/KanBan/hwgfzl_icon_3.png'
import imgicon4 from '@/assets/img/KanBan/hwgfzl_jiantou.png'
import imgiconbj from '@/assets/img/KanBan/icon_baojing.png'
import imgiconsj from '@/assets/img/KanBan/icon_shijian.png'
import imgiconjs from '@/assets/img/KanBan/icon_video.png'
// import imgiconcc from '@/assets/img/KanBan/icon_carCount.png'

import imgiconnan from '@/assets/img/KanBan/tanchuang_icon_nan.png'
import imgiconnv from '@/assets/img/KanBan/tanchuang_icon_nv.png'
import imgiconlhq from '@/assets/img/KanBan/tanchuang_icon_liuhuaqing.png'
import imgiconpm from '@/assets/img/KanBan/tanchuang_icon_pm2.5.png'
import imgiconsd from '@/assets/img/KanBan/tanchuang_icon_shidu.png'
import imgiconaq from '@/assets/img/KanBan/tanchuang_icon_anqi.png'
import imgiconwd from '@/assets/img/KanBan/tanchuang_icon_wendu.png'
import imgiconkw from '@/assets/img/KanBan/tanchuang_icon_kengwei.png'
import imgiconxl from '@/assets/img/KanBan/tanchuang_xiala_4.png'
import imgiconybj from '@/assets/img/KanBan/sjbjtj_icon_yibanjie.png'
import imgiconwbj from '@/assets/img/KanBan/sjbjtj_icon_weibanjie.png'
import imgiconbjz from '@/assets/img/KanBan/sjbjtj_icon_banjiezhong.png'
import imgiconzbt from '@/assets/img/KanBan/zhch_biaoti.png'
import imgiconfh from '@/assets/img/KanBan/zhch_biaoti_fanhui.png'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      loading: false,
      valueSearchCar: '',
      isVisibleTypeCar: false,
      isVisibleCarCount: false,
      carDataForType: [],
      isShowMapVideo: false,
      chartSix: null,
      carVID: '',
      datePlayback: formatTime(new Date(), 'yyyy-MM-dd'),
      today: formatTime(new Date(), 'yyyy-MM-dd'),
      yesterday: formatTime(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      wcstaticInfo: {
        wc1: 0,
        wc2: 0,
        placeCount1: 0,
        placeCount2: 0,
        wd1: 0,
        wd2: 0,
        sd1: 0,
        sd2: 0,
        aq1: 0,
        aq2: 0,
        lhq1: 0,
        lhq2: 0,
        todayRL: 0,
        todayHS: 0,
        todayHD: 0,
      },
      wcDialogInfo: {
        manstate: 0,
        manWD: 0,
        manSD: 0,
        manAQ: 0,
        manLHQ: 0,
        womanstate: 0,
        womanWD: 0,
        womanSD: 0,
        womanAQ: 0,
        womanLHQ: 0,
        manOnline: 0,
        womanOnline: 0,
        rubbishBurn: 0,
        rllToday: 0,
        rllAll: 0,
        rllman: 0,
        rllwoman: 0,
        dlToday: 0,
        dlAll: 0,
        slToday: 0,
        slAll: 0,
        myMOST: 0,
        myMUCH: 0,
        myMOD: 0,
      },
      staticInfo: {
        vehicleOnline: '',
        vehicleAll: 0,
        vehicleLJOnline: '',
        vehicleLJAll: 0,
        vehicleRunAll: 0,
        vehicleRunRate: 0,
        rubbishCollection: 0,
        rubbishBurn: 0,

        vehicleWorkLongSS: 0,
        vehicleWorkLongWP: 0,
        vehicleWorkLongXS: 0,
        vehicleWorkStandardSS: 0,
        vehicleWorkStandardWP: 0,
        vehicleWorkStandardXS: 0,
      },
      AlarmInfo: {
        AlarmWBJ: 0,
        AlarmBJZ: 0,
        AlarmYBJ: 0,
      },
      btnAction: {
        mapCar: true,
        mapCarXS: true,
        mapCarWP: true,
        mapCarSS: true,
        mapCarLJ: true,
        mapCarKSJS: true,
        mapCarXSD: true,
        mapCarXCX: true,
        mapCarXZY: true,
        mapRubbish: true,
        mapWC: true,
        mapWorker: true,
      },
      carCountData: [
        { 'car': '洗扫车', 'count': 0 }, { 'car': '雾炮车', 'count': 0 }, { 'car': '洒水车', 'count': 0 }, { 'car': '垃圾清运车', 'count': 0 }, { 'car': '快速拾捡车', 'count': 0 },
        { 'car': '小型作业车', 'count': 0 }, { 'car': '重型转运车', 'count': 0 }, { 'car': '小三轮转运车', 'count': 0 }, { 'car': '公厕保洁', 'count': 0 }
      ],
      // url4: '',
      url1: 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=014323058002&account=CDCHQ&password=CDCHQ&channel=1&chns=0',
      url2: 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=078041953621&account=CDCHQ&password=CDCHQ&channel=1&chns=1',
      url3: 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=078044093722&account=CDCHQ&password=CDCHQ&channel=1&chns=2',
      url4: 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=014323058001&account=CDCHQ&password=CDCHQ&channel=1&chns=2',
      urlDialog: '',
      urlDialogCar: '',
      axiosNew: null,
      jsession: '',
      carTabsValue: '',
      carTabs: [],
      wcTabsValue: '2000',
      wcTabs: [
        {
          "ID": "2000",
          "channel": "2",
          "NAME": "沙河公园A公厕"
        },
        {
          "ID": "2005",
          "channel": "2",
          "NAME": "东风大桥公共厕所"
        },
        // {
        //     "did":"014323058003",
        //     "channel":"1",
        //     "vid":"枫林苑点位1"
        // },
      ],
      videoDialogType: 0,
      videoData: [],
      videoTabs: {
        carJS: [{ did: '078043973668', channel: '7', vid: '川ADM238' }, { did: '078044093722', channel: '7', vid: '川A18179D' }, { did: '078043980044', channel: '7', vid: '川AQ8721' }],
        carLJ: [{ did: '078040449308', channel: '4', vid: '川ADJ4676' }, { did: '078041953621', channel: '4', vid: '川ADJ6118' }, { did: '078044100360', channel: '6', vid: '川ABR158' },
        { did: '078044098044', channel: '6', vid: '川ADA3749' }, { did: '078044099687', channel: '6', vid: '川AW0378' }, { did: '078044095727', channel: '6', vid: '川ABM906' },
        { did: '078044739167', channel: '4', vid: '川ADJ7455' }, { did: '078044099042', channel: '6', vid: '川ABU973' }, { did: '078044093946', channel: '6', vid: '川AAJ311' }, { did: '078044093946', channel: '6', vid: '川ADA3749' }],
        rubbish: [{ did: '014323058002', channel: '2', vid: '万科天荟小区内' }, { did: '014323058003', channel: '1', vid: '枫林苑点位1' }, { did: '014323058004', channel: '1', vid: '枫林苑点位2' }, { did: '014323058005', channel: '2', vid: '万科天荟地下车库' }],
        wc: [{ vehiIdno: '014323058001', channel: '2', vid: '沙河公厕' }],
      },
      showOnlyOnline: false,
      config1: {
        header: ['车牌号', '车辆载重', '位置', '更新时间'],
        data: [],
        rowNum: 5, //表格行数
        headerHeight: 30,
        headerBGC: '#18435d', //表头
        oddRowBGC: '#112434', //奇数行
        evenRowBGC: '#0f3549', //偶数行
        // index: true,
        columnWidth: [100, 100, 250, 150],
        align: ['center', 'center', 'center', 'center']
      },
      config2: {
        header: ['类型', '时间', '内容', '操作'],
        data: [
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"],
          // ["<span  class='colorRedcd'>报警中</span>", "<span  class='colorBluecd'>27小时前</span>", "编号357876垃圾桶出现损坏", "<span  class='colorYellowcd'>详情</span>"]
        ],
        rowNum: 5, //表格行数
        headerHeight: 30,
        headerBGC: '#18435d', //表头
        oddRowBGC: '#112434', //奇数行
        evenRowBGC: '#0f3549', //偶数行
        // index: true,
        columnWidth: [120, 140, 340, 100],
        align: ['center', 'center', 'center', 'center', 'center', 'center']
      },
      configwater1: {
        data: [0],
        shape: 'round',
        colors: ['#26fbff', '#4c9beb'],
        waveNum: 1,
      },
      configwater2: {
        data: [0],
        shape: 'round',
        colors: ['#26fbff', '#4c9beb'],
        waveNum: 1,
      },
      configwater3: {
        data: [0],
        shape: 'round',
        colors: ['#26fbff', '#4c9beb'],
        waveNum: 1,
      },
      wcID: '0',
      wcList: [{ ID: '0', NAME: '全部' }, { ID: '2000', NAME: '沙河公园A公厕' }, { ID: '2005', NAME: '东风大桥公共厕所' }],
      detailsData: [],
      alarmData: [{}],
      alarmDetailList: [],
      toiletWcData: [{}],
      alarmDetail20List: [],
      valueOnMap: [],
      mapOperationsSummary: [
        {
          name: "今日",
        },
        {
          name: "近7日",
        },
        {
          name: "近1月",
        },
        {
          name: "近1年",
        },
      ],
      changeWCIndex: 0,
      changeWCValue: "WorkOnStandard_RL",
      WCSummary: [
        {
          name: "人流趋势",
        },
        {
          name: "环境报警",
        },
        {
          name: "水电消耗",
        },
      ],
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '0000009',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayLJCar: [],
        arrayJSCar: [],
        arrayWorker: [],
        // arrayForType_Rubbish: [],
        // arrayCLCPolygonData: [],
        // arrayCLCMarkerData: [],
        // arrayZZZMarkerData: [],
        // arrayNCDMarkerData: [],
        // arrayXQCYMarkerData: [],
        // arrayCYMarkerData: [],
      },
      //图片放大
      showBigDialogVisible: false,
      srcBig: '',
      isVisibleAlarm: false,
      isVisibleCarVideo: false,
      isVisibleCCTV: false,
      isVisibleMapPlayback: false,
      // dialogVisibleMapPlayback: false,
      isVisibleWc: false,
      isVisibleSj: false,
      isVisibleSjType: '',
      isVisibleXq: false,
      isVisibleAlarm20: false,
      dialogTitlePlayback: '',
      dialogTitleCarVideo: '',
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loadingDialog: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      icon1: imgicon1,
      icon2: imgicon2,
      icon3: imgicon3,
      icon4: imgicon4,
      iconbj: imgiconbj,
      iconsj: imgiconsj,
      iconjs: imgiconjs,
      iconnan: imgiconnan,
      iconnv: imgiconnv,
      iconlhq: imgiconlhq,
      iconpm: imgiconpm,
      iconsd: imgiconsd,
      iconwd: imgiconwd,
      iconaq: imgiconaq,
      iconkw: imgiconkw,
      iconxl: imgiconxl,
      iconybj: imgiconybj,
      iconwbj: imgiconwbj,
      iconbjz: imgiconbjz,
      iconzbt: imgiconzbt,
      iconfh: imgiconfh,
      iconwc: '',
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  created () {
    // if (localStorage.getItem('VIDEO_UID') === '0'){
    //     this.$message.warning('当前账号不支持视频监控')
    //     return;
    //   }
    this.axiosNew = this.$axios.create({
      baseURL: 'http://111.160.78.62:88/', //这是基础url
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    });

  },
  mounted () {
    this.mapShow();
    this.loginDataV();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    async loginDataV () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/loginDataV";
      const { data } = await this.$Http.get(url)
      if (data.length > 0) {
        this.form.clientNo = data[0].CLIENT_NO

        this.initWorkOnStandard_RL()
        this.initWorkOnStandard_ONE()
        this.initWorkOnStandard_FOUR(0)
        this.initWorkOnStandard_SIX(0)
        this.initWorkRatioByCartype(0)
        this.getWCStaticInfo()
        // this.getWCDialogInfo()
        this.getAlarmDetailInfoCHQ();
        this.getRealtimeWeight()
        this.getDataVehicle();
        this.getDataWorker();
        this.getDataRubbish();
        this.getDataWC();
        setTimeout(() => {
          this.getDataVehicleLJ();
        }, 1000)

        this.selectChange();
        this.loginHuabao()
      }
    },
    // 自动查询
    selectChange () {
      // let timeId = null
      var that = this;
      this.timeID = setInterval(() => {
        that.initWorkOnStandard_FOUR(0)

        that.initWorkOnStandard_ONE();
        that.getDataVehicle();
        that.getDataVehicleLJ();
        that.getDataWorker();
        that.initWorkOnStandard_SIX(0);
        that.initWorkRatioByCartype(0);
        that.getAlarmDetailInfoCHQ(0);
        that.getWCStaticInfo();
        that.getRealtimeWeight();
      }, 600000);
    },
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    async getRealtimeWeight () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetRealtimeWeightCHQ?ClientNo=" + this.form.clientNo;
      const { data } = await this.$Http.get(url)
      // var data = [{ "LICENSE_PLATE": "川ADJ6118", "ORIENTATION_TIME": "2023/9/8 17:12:02", "VEHICLE_NET": "3849", "LONGITUDE": "104.135048", "LATITUDE": "30.678966", "时间": "前" }, { "LICENSE_PLATE": "CH02007", "ORIENTATION_TIME": "2023/9/8 17:11:58", "VEHICLE_NET": "13", "LONGITUDE": "104.093727", "LATITUDE": "30.672809", "时间": "1分钟前" }, { "LICENSE_PLATE": "川ADD9473", "ORIENTATION_TIME": "2023/9/8 16:10:39", "VEHICLE_NET": "1060", "LONGITUDE": "104.117848", "LATITUDE": "30.665818", "时间": "1小时2分钟前" }, { "LICENSE_PLATE": "川ADJ7816", "ORIENTATION_TIME": "2023/9/8 14:59:55", "VEHICLE_NET": "4052", "LONGITUDE": "104.135296", "LATITUDE": "30.678984", "时间": "2小时13分钟前" }, { "LICENSE_PLATE": "CH02011", "ORIENTATION_TIME": "2023/9/8 14:34:50", "VEHICLE_NET": "60", "LONGITUDE": "104.094302", "LATITUDE": "30.662568", "时间": "2小时38分钟前" }, { "LICENSE_PLATE": "川ADJ7455", "ORIENTATION_TIME": "2023/9/8 12:35:11", "VEHICLE_NET": "4133", "LONGITUDE": "104.135032", "LATITUDE": "30.679100", "时间": "4小时37分钟前" }, { "LICENSE_PLATE": "川Ax9601", "ORIENTATION_TIME": "2023/9/8 10:58:44", "VEHICLE_NET": "4086", "LONGITUDE": "104.134680", "LATITUDE": "30.686284", "时间": "6小时14分钟前" }, { "LICENSE_PLATE": "CH02006", "ORIENTATION_TIME": "2023/9/8 7:06:27", "VEHICLE_NET": "273", "LONGITUDE": "104.090477", "LATITUDE": "30.658267", "时间": "10小时6分钟前" }, { "LICENSE_PLATE": "CH02008", "ORIENTATION_TIME": "2023/9/7 20:42:02", "VEHICLE_NET": "197", "LONGITUDE": "104.121113", "LATITUDE": "30.692584", "时间": "20小时30分钟前" }, { "LICENSE_PLATE": "CH02009", "ORIENTATION_TIME": "2023/9/5 10:52:22", "VEHICLE_NET": "1", "LONGITUDE": "104.163880", "LATITUDE": "30.671947", "时间": "78小时20分钟前" }]
      var weightrlList = []
      data.forEach(element => {
        var weightrl = []
        weightrl.push(element.LICENSE_PLATE)
        weightrl.push(element.VEHICLE_NET)
        weightrl.push(element.CURRENT_LOCATION)
        // if (element.时间 === '前') {
        //   weightrl.push('1分钟前')
        // } else { 
        //   weightrl.push(element.时间) 
        // }
        weightrl.push(element.ORIENTATION_TIME)
        weightrlList.push(weightrl)
      });
      this.config1.data = weightrlList
      this.config1 = { ...this.config1 }
    },
    // 放大图片
    bigImage () {
      this.srcBig = this.alarmData[0].报警图片
      this.showBigDialogVisible = true
    },
    handleClose () {
      this.showBigDialogVisible = false;
    },
    handleWcClick (tab) {
      this.wcTabsValue = this.wcTabs[tab.index].ID
      this.getWCDialogInfo()
    },
    async getWCStaticInfo () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=dlhw&url=EXEC CDT_GetGCYXTJInfo '" + this.form.clientNo + "'";
      const { data } = await this.$Http.get(url)
      this.wcstaticInfo.wc1 = data[1][0]
      this.wcstaticInfo.wc2 = data[2][0]
      this.wcstaticInfo.placeCount1 = data[1][1]
      this.wcstaticInfo.placeCount2 = data[2][1]
      this.wcstaticInfo.wd1 = data[1][2]
      this.wcstaticInfo.wd2 = data[2][2]
      this.wcstaticInfo.sd1 = data[1][3]
      this.wcstaticInfo.sd2 = data[2][3]
      this.wcstaticInfo.aq1 = data[1][4]
      this.wcstaticInfo.aq2 = data[2][4]
      this.wcstaticInfo.lhq1 = data[1][5]
      this.wcstaticInfo.lhq2 = data[2][5]
      this.wcstaticInfo.todayRL = data[1][6]
      this.wcstaticInfo.todayHS = data[1][7]
      this.wcstaticInfo.todayHD = data[1][8]
    },
    async getWCDialogImage () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDataOneRow?sqlName=dlhw&url=EXEC CDT_GetToiletPhotoName " + this.wcTabsValue;
      const { data } = await this.$Http.get(url)
      const b = +this.wcTabsValue + '/' + data.data[0]
      this.iconwc = require('../assets/img/WC/' + b + '.jpg')
    },
    async getWCDialogInfo () {
      this.getWCDialogImage()

      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDataOneRow?sqlName=dlhw&url=EXEC CDT_GetGCYXKBInfo " + this.wcTabsValue;

      // if (this.wcTabsValue === '2005') {
      //   this.wcDialogInfo.manstate = '2/2'
      //   this.wcDialogInfo.womanstate = '2/5'
      //   this.wcDialogInfo.manWD = '23.6'
      //   this.wcDialogInfo.womanWD = '22.4'
      //   this.wcDialogInfo.manSD = '89.7'
      //   this.wcDialogInfo.womanSD = '92.1'
      //   this.wcDialogInfo.manAQ = '0.003'
      //   this.wcDialogInfo.womanAQ = '0.005'
      //   this.wcDialogInfo.manLHQ = '0.001'
      //   this.wcDialogInfo.womanLHQ = '0.002'
      //   this.wcDialogInfo.manOnline = '0'
      //   this.wcDialogInfo.womanOnline = '3'
      //   this.wcDialogInfo.rllAll = '8270'
      //   this.wcDialogInfo.rllToday = '345'
      //   this.wcDialogInfo.rllman = '231'
      //   this.wcDialogInfo.rllwoman = '114'
      //   this.wcDialogInfo.dlAll = '325.1'
      //   this.wcDialogInfo.dlToday = '5.9'
      //   this.wcDialogInfo.slAll = '112'
      //   this.wcDialogInfo.slToday = '2'
      // } else {
      const { data } = await this.$Http.get(url)
      data.data.forEach(element => {
        if (element.indexOf('男厕剩余坑位') > -1) {
          this.wcDialogInfo.manstate = element.split('：')[1]
        }
        if (element.indexOf('女厕剩余坑位') > -1) {
          this.wcDialogInfo.womanstate = element.split('：')[1]
        }
        if (element.indexOf('男厕温度') > -1) {
          this.wcDialogInfo.manWD = element.split('：')[1]
        }
        if (element.indexOf('女厕温度') > -1) {
          this.wcDialogInfo.womanWD = element.split('：')[1]
        }
        if (element.indexOf('男厕湿度') > -1) {
          this.wcDialogInfo.manSD = element.split('：')[1]
        }
        if (element.indexOf('女厕湿度') > -1) {
          this.wcDialogInfo.womanSD = element.split('：')[1]
        }
        if (element.indexOf('男厕氨气') > -1) {
          this.wcDialogInfo.manAQ = element.split('：')[1]
        }
        if (element.indexOf('女厕氨气') > -1) {
          this.wcDialogInfo.womanAQ = element.split('：')[1]
        }
        if (element.indexOf('男厕硫化氢') > -1) {
          this.wcDialogInfo.manLHQ = element.split('：')[1]
        }
        if (element.indexOf('女厕硫化氢') > -1) {
          this.wcDialogInfo.womanLHQ = element.split('：')[1]
        }
        if (element.indexOf('男厕剩余蹲位') > -1) {
          this.wcDialogInfo.manOnline = element.split('：')[1]
        }
        if (element.indexOf('女厕剩余蹲位') > -1) {
          this.wcDialogInfo.womanOnline = element.split('：')[1]
        }
        if (element.indexOf('累计总人流量') > -1) {
          this.wcDialogInfo.rllAll = element.split('：')[1]
        }
        if (element.indexOf('当日累计人流量') > -1) {
          this.wcDialogInfo.rllToday = element.split('：')[1]
        }
        if (element.indexOf('男厕人流量') > -1) {
          this.wcDialogInfo.rllman = element.split('：')[1]
        }
        if (element.indexOf('女厕人流量') > -1) {
          this.wcDialogInfo.rllwoman = element.split('：')[1]
        }
        if (element.indexOf('累计用电量') > -1) {
          this.wcDialogInfo.dlAll = element.split('：')[1]
        }
        if (element.indexOf('当日用电量') > -1) {
          this.wcDialogInfo.dlToday = element.split('：')[1]
        }
        if (element.indexOf('累计用水量') > -1) {
          this.wcDialogInfo.slAll = element.split('：')[1]
        }
        if (element.indexOf('当日用水量') > -1) {
          this.wcDialogInfo.slToday = element.split('：')[1]
        }
        if (element.indexOf('非常满意') > -1) {
          this.wcDialogInfo.myMOST = element.split('：')[1]
        }
        if (element.indexOf('满意') > -1) {
          this.wcDialogInfo.myMUCH = element.split('：')[1]
        }
        if (element.indexOf('一般') > -1) {
          this.wcDialogInfo.myMOD = element.split('：')[1]
        }
      });
      // }
    },
    async getAlarmDetailInfoCHQ () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmInfoCHQ?ClientNo=" + this.form.clientNo + "&TopCount=20";
      const { data } = await this.$Http.get(url)
      var alarmList = []
      data.forEach(element => {
        var alarm = []
        var alarmDetail = []
        // alarm.push("<span id='" + element.ID + "' title='" + element.类型 + "' class='colorRedcd'>" + element.状态 + "</span>")
        alarmDetail.push(element.ID)
        alarmDetail.push(element.类型)
        alarm.push("<span  class='colorRedcd'>" + element.状态 + "</span>")
        alarm.push("<span  class='colorBluecd'>" + element.时间 + "</span>")
        alarm.push(element.内容)
        alarm.push("<span  class='colorYellowcd'>详情</span>")
        this.alarmDetailList.push(alarmDetail)
        alarmList.push(alarm)
      });
      this.config2.data = alarmList
      this.config2 = { ...this.config2 }
    },
    returnIndex () {
      window.location.href = "http://10.1.212.43:8089/themeview/1e695f64aac8467588dcecac18d2febd"
    },
    handleClick (tab, event) {
      this.carTabsValue = this.carTabs[tab.index].vid
      this.urlDialog = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&account=CDCHQ&password=CDCHQ&vehiIdno=' + this.carTabsValue
      // this.urlDialog = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&channel=' + this.carTabs[tab.index].channel + '&account=CDCHQ&password=CDCHQ&vehiIdno=' + this.carTabsValue
      console.log(this.urlDialog)
    },
    async loginHuabao () {
      // http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=014323058003&account=CDCHQ&password=CDCHQ&stream=0
      const that = this;
      this.axiosNew.post('StandardApiAction_login.action', {
        account: 'CDCHQ',
        password: 'CDCHQ',
      })
        .then(function (response) {
          if (response.data.result == 0) {
            that.jsession = response.data.jsession
            that.getCarOnlineReturn()
          } else {
            this.$message.error('视频账号连接异常');
          }
        });
    },
    async getCarOnlineReturn () {
      const that = this;
      this.axiosNew.post('StandardApiAction_getDeviceOlStatus.action', {
        jsession: this.jsession,
      })
        .then(function (response) {
          if (response.data.result == 0) {
            that.videoData = response.data;
            console.log(that.videoData)
          } else {
            this.$message.error('该车辆当前为离线状态');
          }
        });
    },
    async mapShow () {
      // 百度地图API功能
      
      // this.map = newMap();
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.centerAndZoom(new BMap.Point(104.127889, 30.671344), 16)
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      this.map.setMapStyle({ style: 'midnight' });
      // this.map.setMapStyle([{
      //     featureType: "poilabel", //兴趣点
      //     elementType: "all",
      //     stylers: {
      //       visibility: 'off',
      //     },
      //   }]);
      this.map.getContainer().style.backgroundColor = 'black';
      // this.map.setMapStyleV2({ styleId: "0ea9da99f69d56246d9910bfd0f7c26b" });
      // var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
      // this.map.addControl(scaleCtrl);

      //缩放屏幕
      const _this = this;
      // 临时存储地图中心点经度和纬度
      let center_lng = 0;
      let center_lat = 0;
      // 监听地图缩放开始事件 lng表示经度，lat表示纬度
      this.map.addEventListener("zoomstart", function (e) {
        center_lng = _this.map.getCenter().lng;
        center_lat = _this.map.getCenter().lat;
      });
      // 监听地图缩放结束事件 lng表示经度，lat表示纬度
      this.map.addEventListener("zoomend", function (e) {
        console.log("地图缩放至：" + this.getZoom() + "级");
        _this.map.centerAndZoom(
          new BMap.Point(center_lng, center_lat),
          this.getZoom()
        );
      });
    },
    async mapDialogShow () {
      this.mapDialog = new BMap.Map('mapDialog')// 创建Map实例
      this.mapDialog.setMapStyle({ style: 'midnight' });
      this.mapDialog.centerAndZoom("成都", 10);
      this.mapDialog.getContainer().style.backgroundColor = 'black';
      // var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
      // this.mapDialog.addControl(scaleCtrl);
    },
    getLocationForAddMarker (markerInfo) {
      const _self = this;
      var point = new BMap.Point(markerInfo.LNG, markerInfo.LAT)
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function (rs) {
        if (rs) {
          var addComp = rs.addressComponents;
          console.log(addComp)
          markerInfo.LOCATION = /*addComp.province + ", " + addComp.city + ", " + */addComp.district + "  " + addComp.street + "  " + addComp.streetNumber
        }
        _self.addMarkerInfo(markerInfo)
      });
    },
    addMarkerUnmoveInfo (markerInfo) {
      var point = new BMap.Point(markerInfo.LONGITUDE, markerInfo.LATITUDE)
      // this.map.centerAndZoom(point, 20);
      // 信息窗体
      const opts = {
        width: 300,     // 信息窗口宽度
        height: 330,     // 信息窗口高度
        title: markerInfo.NAME, // 信息窗口标题
      }

      const infoWindow = new BMap.InfoWindow(markerInfo.context, opts)  // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point)


    },
    addMarkerInfo (markerInfo) {
      this.carVID = markerInfo.VID;
      var point = new BMap.Point(markerInfo.LNG, markerInfo.LAT)
      // this.map.centerAndZoom(point, 20);
      // 信息窗体
      const opts = {
        width: 300,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: markerInfo.CARTYPE + ' ' + markerInfo.LICENSEPLATE, // 信息窗口标题
      }
      var str = ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  车辆类型：${markerInfo.CARTYPE}</div>
	<div style="margin-top:10px;">  车 牌 号：${markerInfo.LICENSEPLATE}</div>
	<div style="margin-top:10px;">  车辆位置：${markerInfo.LOCATION}</div>
	<div style="margin-top:10px;">  车辆速度：${markerInfo.SPEED}</div>
  
	`
      if ('VEHICLE_NET' in markerInfo) {
        if (markerInfo.VEHICLE_NET > 0) {
          str += `<div style="margin-top:10px;">  垃圾重量称重：${markerInfo.VEHICLE_NET} 公斤</div>`
          opts["height"] = 260
        }
      }
      str += `<img class="thumbnail" src="http://111.160.78.62:4514/0IMAGE/btn_luxian.png" id="luxian"> `
      if (markerInfo.VIDEO == '1') {
        str += `<img class="thumbnail" src="http://111.160.78.62:4514/0IMAGE/btn_jiankong.png" id="jiankong">
  `
        // <img class="thumbnail" src="http://111.160.78.62:4514/0IMAGE/btn_dianhua.png" id="dianhua">
      }
      str += `</div>`
      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point)
      const _this = this;
      setTimeout(() => {
        window.document.getElementById("luxian").addEventListener("click", function () {
          _this.isVisibleMapPlayback = true
          _this.dialogTitlePlayback = markerInfo.LICENSEPLATE + '轨迹回放'
        });
        if (markerInfo.VIDEO == '1') {
          window.document.getElementById("jiankong").addEventListener("click", function () {
            _this.dialogTitleCarVideo = markerInfo.LICENSEPLATE + '视频监控'
            var ch = 6
            if (markerInfo.LICENSEPLATE == '川ADJ7455' || markerInfo.LICENSEPLATE == '川ADJ6118' || markerInfo.LICENSEPLATE == '川ADJ4676') {
              ch = 4
            }
            _this.urlDialogCar = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&vehiIdno=' + markerInfo.LICENSEPLATE + '&account=CDCHQ&password=CDCHQ'
            _this.isVisibleCarVideo = true
          });
        }
      }, 1000)

    },
    addMarkerInfoWorker (markerInfo) {
      var point = new BMap.Point(markerInfo.LNG, markerInfo.LAT)
      // this.map.centerAndZoom(point, 20);
      // 信息窗体
      const opts = {
        width: 300,     // 信息窗口宽度
        height: 220,     // 信息窗口高度
        title: '公厕保洁 ' + markerInfo.NAME, // 信息窗口标题
      }
      var age = Math.round(Math.random() * 10 + 40);
      var lengthName = markerInfo.NAME.length
      var num = markerInfo.NAME.substring(lengthName - 1, lengthName)
      var str = ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  作业区域：跳蹬河街道</div>
	<div style="margin-top:10px;">  姓名：${markerInfo.NAME}</div>
	<div style="margin-top:10px;">  工号：BCBJ100${num}</div>
  <div style="margin-top:10px;">  工种分类：公厕保洁</div>
  <div style="margin-top:10px;">  性别：${markerInfo.SEX}</div>
  <div style="margin-top:10px;">  年龄：${age}</div>
	`
      str += `</div>`
      const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point)
    },
    // 画MapV图层
    drawMapV (array) {
      console.log(array)
      console.log(this.MapV.dataSetDic)
      // {'key':'洗扫车','data':car0
      array.forEach(arrayDataForSameIcon => {
        // console.log(arrayDataForSameIcon.key)

        if (arrayDataForSameIcon.data.length == 0) {
          console.log(arrayDataForSameIcon.key)

          this.MapV.dataSetDic[arrayDataForSameIcon.key].set([]);
          return;
        }

        const _self = this;

        let img = new Image();
        // img.src = icon;
        img.src = require('@/assets/img/MapMarkerCD/' + arrayDataForSameIcon.data[0].img + '.png')
        img.onload = function () {
          //循环加载同一张图片的车辆数据
          let arrayImage = arrayDataForSameIcon.data.map((v) => {
            v.geometry = {
              type: "Point",
              coordinates: [v.LNG, v.LAT],
            };
            v.icon = img;
            v.text = v.LICENSE_PLATE;
            return v;
          });

          let key = arrayDataForSameIcon.data[0].img;
          if (Object.prototype.hasOwnProperty.call(_self.MapV.dataSetDic, key)) {
            console.log('换数据' + key + arrayImage)
            _self.MapV.dataSetDic[key].set(arrayImage);
          } else {
            // console.log('新建' + key)
            let optionsICON = {
              draw: "icon",
              width: 45, // 规定图像的宽度
              height: 30, // 规定图像的高度
              size: 50, // 规定图像的点击范围
              methods: {
                click: function (e) {
                  if (e) {
                    if (e.img === '公厕保洁') {
                      _self.addMarkerInfoWorker(e)
                    } else {
                      _self.getLocationForAddMarker(e)
                    }

                    // _self.isVisibleMapPlayback = true
                  }
                  // alert(str)
                  // _self.map.openInfoWindow(infoWindow);

                  // console.log(e);
                }
              },
            };

            let dataSet = new mapv.DataSet(arrayImage);
            _self.MapV.dataSetDic[key] = dataSet;
            _self.MapV.iconLayerDic[key] = new mapv.baiduMapLayer(_self.map, dataSet, optionsICON);
          }
        };
      });
    },
    async drawMapVUnmove (arrayPoint, icon, key) {
      const _self = this;

      let img = new Image();
      img.src = icon
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        let arrayImage = arrayPoint.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img;
          v.text = v.NAME;
          return v;
        })

        let optionsICON = {
          draw: 'icon',
          width: 35, // 规定图像的宽度
          height: 35, // 规定图像的高度
          size: 50, // 规定图像的点击范围
          methods: {
            click: function (e) {
              if (e) {
                _self.addMarkerUnmoveInfo(e)
                // _self.isVisibleMapPlayback = true
              }
              // alert(str)
              // _self.map.openInfoWindow(infoWindow);

              // console.log(e);
            }
          },
          // offset: { // 偏移值
          //       x: 0,
          //       y: 20
          //     }
        }

        let dataSet = new mapv.DataSet(arrayImage);
        // _self.MapV.dataSetDic[key] = dataSet;
        _self.MapV.VIcon_Installations[key] = new mapv.baiduMapLayer(_self.map, dataSet, optionsICON);
      }
      // }else{
      //   mapVIcon.sh
      // }
    },
    getDataRubbish () {
      //   所属单位：成华区城管局
      // 地址：成华区圣灯路88号
      // 所属街道：跳蹬河街道
      // 位置：经度：104.120411  维度：30.675308
      // 启用日期：2020-07-11
      // 垃圾桶数量：4
      // 负责人：
      // 联系电话：15803526543
      // 是否垃圾分类：是
      var arrayRubbish = [{
        "LONGITUDE": 104.128938, "LATITUDE": 30.678872, "NAME": "枫林苑前端垃圾四分类点位1", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  所属单位：成华区城管局</div>
	<div style="margin-top:10px;">  地址：成华区圣灯路88号</div>
	<div style="margin-top:10px;">  所属街道：跳蹬河街道</div>
	<div style="margin-top:10px;">  位置：经度：104.120411  维度：30.675308</div>
  <div style="margin-top:10px;">  启用日期：2020-07-11</div>
  <div style="margin-top:10px;">  垃圾桶数量：4</div>
  <div style="margin-top:10px;">  负责人：</div>
  <div style="margin-top:10px;">  联系电话：15803526543</div>
  <div style="margin-top:10px;">  是否垃圾分类：是</div>
	`},
      {
        "LONGITUDE": 104.129832, "LATITUDE": 30.678328, "NAME": "枫林苑前端垃圾四分类点位2", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  所属单位：成华区城管局</div>
	<div style="margin-top:10px;">  地址：成华区圣灯路88号</div>
	<div style="margin-top:10px;">  所属街道：跳蹬河街道</div>
	<div style="margin-top:10px;">  位置：经度：104.120411  维度：30.675308</div>
  <div style="margin-top:10px;">  启用日期：2020-07-11</div>
  <div style="margin-top:10px;">  垃圾桶数量：4</div>
  <div style="margin-top:10px;">  负责人：</div>
  <div style="margin-top:10px;">  联系电话：15803526543</div>
  <div style="margin-top:10px;">  是否垃圾分类：是</div>
	`},
      {
        "LONGITUDE": 104.127702, "LATITUDE": 30.672081, "NAME": "万科天荟前端垃圾分类1", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  所属单位：成华区城管局</div>
	<div style="margin-top:10px;">  地址：成华区建设南路29号</div>
	<div style="margin-top:10px;">  所属街道：跳蹬河街道</div>
	<div style="margin-top:10px;">  位置：经度 104.118288  纬度 30.668503</div>
  <div style="margin-top:10px;">  启用日期：2020-07-11</div>
  <div style="margin-top:10px;">  垃圾桶数量：4</div>
  <div style="margin-top:10px;">  负责人：</div>
  <div style="margin-top:10px;">  联系电话：13853678763</div>
  <div style="margin-top:10px;">  是否垃圾分类：是</div>
	`},
      {
        "LONGITUDE": 104.128609, "LATITUDE": 30.671918, "NAME": "万科天荟前端垃圾分类地下室", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  所属单位：成华区城管局</div>
	<div style="margin-top:10px;">  地址：成华区建设南路29号</div>
	<div style="margin-top:10px;">  所属街道：跳蹬河街道</div>
	<div style="margin-top:10px;">  位置：经度 104.118288  纬度 30.668503</div>
  <div style="margin-top:10px;">  启用日期：2020-07-11</div>
  <div style="margin-top:10px;">  垃圾桶数量：4</div>
  <div style="margin-top:10px;">  负责人：</div>
  <div style="margin-top:10px;">  联系电话：13853678763</div>
  <div style="margin-top:10px;">  是否垃圾分类：是</div>
	`},]
      this.drawMapVUnmove(arrayRubbish, imgLJ, '垃圾点位')
    },
    mapMarkerShowHideRubbish () {
      this.btnAction.mapRubbish = !this.btnAction.mapRubbish;
      var vMarker = this.MapV.VIcon_Installations['垃圾点位']
      if (this.btnAction.mapRubbish) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    getDataWC () {
      var arrayWC = [{
        "LONGITUDE": 104.127889, "LATITUDE": 30.671344, "NAME": "沙河公园", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  权属单位：跳蹬河街道</div>
	<div style="margin-top:10px;">  归属区域：成华区跳蹬河街道</div>
	<div style="margin-top:10px;">  公厕类型：三类</div>
	<div style="margin-top:10px;">  星级：三星</div>
  <div style="margin-top:10px;">  地址：成华区建设南路支路口</div>
  <div style="margin-top:10px;">  建筑面积（㎡）：180.00</div>
  <div style="margin-top:10px;">  启用时间：2019-01-01</div>
  <div style="margin-top:10px;">  运营单位负责人：公厕管理员</div>
  <div style="margin-top:10px;">  运营单位负责人电话：84329817</div>
	` },//104.127889,30.671344
      {
        "LONGITUDE": 104.09713, "LATITUDE": 30.658587, "NAME": "东风大桥公厕", "context":
          ` <div style="color:#fff;font-size:16px;">
	<div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	<div style="margin-top:10px;">  权属单位：跳蹬河街道</div>
	<div style="margin-top:10px;">  归属区域：成华区跳蹬河街道</div>
	<div style="margin-top:10px;">  公厕类型：二类</div>
	<div style="margin-top:10px;">  星级：一星</div>
  <div style="margin-top:10px;">  地址：成华区东风路4号</div>
  <div style="margin-top:10px;">  建筑面积（㎡）：135.15</div>
  <div style="margin-top:10px;">  启用时间：1991-01-01</div>
  <div style="margin-top:10px;">  运营单位负责人：公厕管理员</div>
  <div style="margin-top:10px;">  运营单位负责人电话：84328918</div>
	` }//104.09713,30.658587
      ]//104.127889,30.671344
      this.drawMapVUnmove(arrayWC, imgWC, '公厕')
    },
    mapMarkerShowHideWC () {
      this.btnAction.mapWC = !this.btnAction.mapWC;
      var vMarker = this.MapV.VIcon_Installations['公厕']
      if (this.btnAction.mapWC) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    searchCar () {
      var found = false
      this.Data.arrayLJCar.forEach(element => {
        if (element.LICENSEPLATE.indexOf(this.valueSearchCar) > -1) {
          found = true;
          this.map.centerAndZoom(new BMap.Point(element.LNG, element.LAT), 16);
          this.addMarkerInfo(element);
          throw new Error("找到，停止循环，不是报错");
        }
      });
      if (!found) {
        this.Data.arrayJSCar.forEach(element => {
          if (element.LICENSEPLATE.indexOf(this.valueSearchCar) > -1) {
            found = true;
            this.map.centerAndZoom(new BMap.Point(element.LNG, element.LAT), 16);
            this.addMarkerInfo(element);
            throw new Error("找到，停止循环，不是报错");
          }
        });
      }
      if (!found) {
        this.Data.arrayWorker.forEach(element => {
          if (element.NAME.indexOf(this.valueSearchCar) > -1) {
            found = true;
            this.map.centerAndZoom(new BMap.Point(element.LNG, element.LAT), 16);
            this.addMarkerInfoWorker(element);
            throw new Error("找到，停止循环，不是报错");
          }
        });
      }
    },
    mapMarkerShowHideXS () {
      this.btnAction.mapCarXS = !this.btnAction.mapCarXS;
      var vMarker = this.MapV.iconLayerDic['洗扫车']
      if (this.btnAction.mapCarXS) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideWP () {
      this.btnAction.mapCarWP = !this.btnAction.mapCarWP;
      var vMarker = this.MapV.iconLayerDic['雾炮车']
      if (this.btnAction.mapCarWP) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideSS () {
      this.btnAction.mapCarSS = !this.btnAction.mapCarSS;
      var vMarker = this.MapV.iconLayerDic['洒水车']
      if (this.btnAction.mapCarSS) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideLJ () {
      this.btnAction.mapCarLJ = !this.btnAction.mapCarLJ;
      var vMarker = this.MapV.iconLayerDic['垃圾清运车']
      if (this.btnAction.mapCarLJ) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideKSJS () {
      this.btnAction.mapCarKSJS = !this.btnAction.mapCarKSJS;
      var vMarker = this.MapV.iconLayerDic['快速拾捡车']
      if (this.btnAction.mapCarKSJS) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideXCX () {
      this.btnAction.mapCarXCX = !this.btnAction.mapCarXCX;
      var vMarker = this.MapV.iconLayerDic['重型转运车']
      if (this.btnAction.mapCarXCX) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideXSD () {
      this.btnAction.mapCarXSD = !this.btnAction.mapCarXSD;
      var vMarker = this.MapV.iconLayerDic['小型作业车']
      if (this.btnAction.mapCarXSD) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideXZY () {
      this.btnAction.mapCarXZY = !this.btnAction.mapCarXZY;
      var vMarker = this.MapV.iconLayerDic['小三轮转运车']
      if (this.btnAction.mapCarXZY) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideWorker () {
      this.btnAction.mapWorker = !this.btnAction.mapWorker;
      var vMarker = this.MapV.iconLayerDic['公厕保洁']
      if (this.btnAction.mapWorker) {
        vMarker.show()
      } else {
        vMarker.hide()
      }
    },
    mapMarkerShowHideCar () {
      this.btnAction.mapCar = !this.btnAction.mapCar;
      for (var key in this.MapV.iconLayerDic) {
        var vMarker = this.MapV.iconLayerDic[key]
        if (this.btnAction.mapCar) {
          vMarker.show()
          this.btnAction.mapCarXZY = true
          this.btnAction.mapCarXSD = true
          this.btnAction.mapCarXCX = true
          this.btnAction.mapCarKSJS = true
          this.btnAction.mapCarLJ = true
          this.btnAction.mapCarSS = true
          this.btnAction.mapCarWP = true
          this.btnAction.mapCarXS = true
        } else {
          vMarker.hide()
          this.btnAction.mapCarXZY = false
          this.btnAction.mapCarXSD = false
          this.btnAction.mapCarXCX = false
          this.btnAction.mapCarKSJS = false
          this.btnAction.mapCarLJ = false
          this.btnAction.mapCarSS = false
          this.btnAction.mapCarWP = false
          this.btnAction.mapCarXS = false
        }
      }
    },
    videoShow (type) {
      var arrCar = []
      var dicPolo = []
      switch (type) {
        case 0:
          dicPolo = this.videoTabs.rubbish;
          break;
        case 1:
          dicPolo = this.videoTabs.carLJ;
          break;
        case 2:
          dicPolo = this.videoTabs.carJS;
          break;
        case 3:
          dicPolo = this.videoTabs.wc;
          break;
      }
      // var arrPolo = []
      // dicPolo.forEach(element => {
      //   arrPolo.push(element.did)
      // });
      // // this.videoData.onlines.forEach(item => {
      // for (var i = this.videoData.onlines.length - 1; i >= 0; i--) {
      //   var item = this.videoData.onlines[i]

      //   if (arrPolo.indexOf(item.did) > -1) {
      //     if (item.online == 0) {
      //       item.title = item.vid + '（离线）'
      //       arrCar.push(item)
      //     } else {
      //       item.title = item.vid + '（在线）'
      //       arrCar.unshift(item)
      //     }
      //   }
      // }
      this.carTabs = dicPolo
      if (this.carTabs.length > 0) {
        this.handleClick({ index: 0 }, null)
        this.isVisibleCCTV = true;
      } else {
        this.$message.error('无设备显示');
      }
    },
    // 画车辆轨迹
    drawPicture (array) {

      // 画起点
      var markerStart = new BMap.Marker(new BMap.Point(array[0].LNG, array[0].LAT), { icon: new BMap.Icon(imgStart, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.mapDialog.addOverlay(markerStart)
      // 画终点
      var markerEnd = new BMap.Marker(new BMap.Point(array[(array.length - 1)].LNG, array[(array.length - 1)].LAT), { icon: new BMap.Icon(imgEnd, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.mapDialog.addOverlay(markerEnd)
      // 画轨迹
      var pointArr = []
      var boundPoints = [];
      for (var i = 0; i < array.length; i++) {
        var item = array[i];
        pointArr.push([item.LNG, item.LAT])
        boundPoints.push(new BMap.Point(item.LNG, item.LAT))
      }
      var dataSet = new mapv.DataSet({
        geometry: {
          type: 'LineString',
          coordinates: pointArr
        },
      });
      var options = {
        zIndex: -1,
        strokeStyle: '#FFD700',//47,79,79
        lineWidth: 4,
        lineJoin: 'round',
        draw: 'simple'
      }
      new mapv.baiduMapLayer(this.mapDialog, dataSet, options);
      this.mapDialog.setViewport(boundPoints);
    },
    // 实时
    // async getWCInfo () {
    //   var url = "http://111.160.78.62:5561/CompanyapiBDEapi/WC/GetToiletInfo?CLIENTNO=00000";
    //   const { data } = await this.$Http.get(url)
    // },
    changeShowOnlyOnline () {
      this.getDataVehicle()
      this.getDataVehicleLJ()
      this.getDataWorker()
    },
    async getDataWorker () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetListCurrentWorkerCHQ?ClientNo=" + this.form.clientNo;
      const { data } = await this.$Http.get(url)
      this.Data.arrayWorker = data

      var worker = []
      var workerOnline = 0
      data.forEach(element => {
        if (this.showOnlyOnline && element.STATUS == 0) {
          return;
        }
        if (element.STATUS === 0) {
          element.STATUSstr = "离线"
        } else {
          element.STATUSstr = "在线"
          workerOnline++
        }
        element.img = '公厕保洁'
        element.LICENSEPLATE = element.NAME
        worker.push(element)
      });
      if (!this.showOnlyOnline) {
        this.carCountData[8].count = worker.length
        this.carCountData[8].data = worker
        this.carCountData[8].online = workerOnline
      }
      // this.drawMapV([worker])
      this.drawMapV([{ 'key': '公厕保洁', 'data': worker }])
    },
    async getDataVehicleLJ () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetLJCarListCurrentVehicleCHQ?CLIENTNO=" + this.form.clientNo + "&LICENSEPLATE=&CARGROUP=&CARSTATUS=1&CARTYPE=";
      const { data } = await this.$Http.get(url)
      this.Data.arrayLJCar = data
      var car0 = []
      var car1 = []
      var car2 = []
      var carOnline0 = 0
      var carOnline1 = 0
      var carOnline2 = 0
      this.staticInfo.vehicleLJAll = data.length
      data.forEach(element => {
        if (this.showOnlyOnline && element.STATUS == 6) {
          return;
        }
        if (element.STATUS === 0) {
          element.STATUSstr = "在线"
        } else {
          element.STATUSstr = "离线"
        }
        switch (element.CARTYPE) {
          case '电动三轮车':
            {
              if (element.STATUS === 0) {
                carOnline0++
              }
              element.img = '小三轮转运车'
              car0.push(element)
            }
            break;
          case '重型转运车':
            {
              if (element.STATUS === 0) {
                carOnline1++
              }
              element.img = '重型转运车'
              car1.push(element)
            }
            break;
          default:
            {
              if (element.STATUS === 0) {
                carOnline2++
              }
              element.img = '垃圾清运车'
              car2.push(element)
            }
            break;
        }
        // }
      });
      if (!this.showOnlyOnline) {
        this.carCountData[7].count = car0.length
        this.carCountData[6].count = car1.length
        this.carCountData[3].count = car2.length

        this.carCountData[7].data = car0
        this.carCountData[6].data = car1
        this.carCountData[3].data = car2

        this.carCountData[7].online = carOnline0
        this.carCountData[6].online = carOnline1
        this.carCountData[3].online = carOnline2
      }

      // this.carCountData[6] = {'car':'重型转运车','count':car1.length}
      // this.carCountData[3] = {'car':'垃圾清运车','count':car2.length}
      // this.drawMapV([car0, car1, car2])
      this.drawMapV([{ 'key': '小三轮转运车', 'data': car0 }, { 'key': '重型转运车', 'data': car1 }, { 'key': '垃圾清运车', 'data': car2 }])

      // this.map.centerAndZoom(new BMap.Point(data[0].LNG, data[0].LAT), 16);
    },
    async getDataVehicle () {
      // var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetCarListCurrentVehicle?CLIENTNO=00000&LICENSEPLATE=&CARGROUP=&CARSTATUS=1&CARTYPE=";
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetJSCarListCurrentVehicleCHQ?CLIENTNO=" + this.form.clientNo + "&LICENSEPLATE=&CARGROUP=&CARSTATUS=1&CARTYPE=";
      const { data } = await this.$Http.get(url)
      this.Data.arrayJSCar = data
      var car0 = []
      var car1 = []
      var car2 = []
      var car3 = []
      var car4 = []

      var carOnline0 = 0
      var carOnline1 = 0
      var carOnline2 = 0
      var carOnline3 = 0
      var carOnline4 = 0
      this.staticInfo.vehicleAll = data.length
      data.forEach(element => {
        if (this.showOnlyOnline && element.STATUS == 6) {
          return;
        }
        if (element.STATUS === 0) {
          element.STATUSstr = "在线"
        } else {
          element.STATUSstr = "离线"
        }
        if (element.LICENSEPLATE === '川A18179D') {
          element.img = '洗扫车'
          car0.push(element)
        } else {
          switch (element.CARTYPE) {
            case '洗扫车':
              {
                if (element.STATUS === 0) {
                  carOnline0++
                }
                element.img = '洗扫车'
                car0.push(element)
              }
              break;
            case '雾炮车':
              {
                if (element.STATUS === 0) {
                  carOnline1++
                }
                element.img = '雾炮车'
                car1.push(element)
              }
              break;
            case '洒水车':
              {
                if (element.STATUS === 0) {
                  carOnline2++
                }
                element.img = '洒水车'
                car2.push(element)
              }
              break;
            case '快保车':
              {
                if (element.STATUS === 0) {
                  carOnline3++
                }
                element.img = '快速拾捡车'
                car3.push(element)
              }
              break;
            default:
              {
                if (element.STATUS === 0) {
                  carOnline4++
                }
                element.img = '小型作业车'
                car4.push(element)
              }
              break;
          }
        }

      });
      if (!this.showOnlyOnline) {
        this.carCountData[0].count = car0.length
        this.carCountData[1].count = car1.length
        this.carCountData[2].count = car2.length
        this.carCountData[4].count = car3.length
        this.carCountData[5].count = car4.length

        this.carCountData[0].data = car0
        this.carCountData[1].data = car1
        this.carCountData[2].data = car2
        this.carCountData[4].data = car3
        this.carCountData[5].data = car4

        this.carCountData[0].online = carOnline0
        this.carCountData[1].online = carOnline1
        this.carCountData[2].online = carOnline2
        this.carCountData[4].online = carOnline3
        this.carCountData[5].online = carOnline4
      }


      // this.drawMapV([car0, car1, car2, car3, car4])
      this.drawMapV([{ 'key': '洗扫车', 'data': car0 }, { 'key': '雾炮车', 'data': car1 }, { 'key': '洒水车', 'data': car2 }
        , { 'key': '快速拾捡车', 'data': car3 }, { 'key': '小型作业车', 'data': car4 }])

      // this.map.centerAndZoom(new BMap.Point(data[0].LNG, data[0].LAT), 16);
    },
    async getPlayback () {
      this.mapDialog.clearOverlays()
      this.loadingDialog = true
      // const loading = this.$loading({
      //   target: '.el-dialog',
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });

      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetVehicleHistoryInfo?VID=" + this.carVID + "&StartDate=" + this.datePlayback + "+00:00:00&EndDate=" + this.datePlayback + "+23:59:59";
      console.log(url)
      const { data } = await this.$Http.get(url)
      // loading.close();
      this.loadingDialog = false
      if (data.length < 1) {
        this.$message.warning(this.carVID + '日未查询到轨迹数据')
      } else {
        this.drawPicture(data)
      }
    },
    // 报警事件信息
    async getWarningDetailList () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmBJSJKBCHQ?ClientNo=" + this.form.clientNo + "&Type=" + this.isVisibleSjType;
      console.log(url)
      const { data } = await this.$Http.get(url)
      this.detailsData = data
    },
    // 滚动报警更多信息
    async getAlarmDetail20Info () {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmInfoCHQ?ClientNo=" + this.form.clientNo + "&TopCount=20";
      const { data } = await this.$Http.get(url)
      this.alarmDetail20List = data
    },
    // 滚动报警详情信息
    async getAlarmDetailInfo (config) {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmDetailCHQ?id=" + this.alarmDetailList[config.rowIndex][0] + "&type=" + this.alarmDetailList[config.rowIndex][1];
      console.log(url)
      const { data } = await this.$Http.get(url)
      if (data.length > 0) {
        const _self = this;
        var point = new BMap.Point(data[0].经度, data[0].纬度);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          data[0].LOCATION = /*addComp.province + ", " + addComp.city + ", " + */addComp.district + "  " + addComp.street + "  " + addComp.streetNumber
          _self.alarmData = data
        });
      }
    },
    // 弹窗报警详情信息
    async getAlarmDetailInfo1 (row) {
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmDetailCHQ?id=" + row.ID + "&type=" + (row.TYPE || row.类型);
      console.log(url)
      const { data } = await this.$Http.get(url)
      if (data.length > 0) {
        const _self = this;
        var point = new BMap.Point(data[0].经度, data[0].纬度);
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          data[0].LOCATION = /*addComp.province + ", " + addComp.city + ", " + */addComp.district + "  " + addComp.street + "  " + addComp.streetNumber
          _self.alarmData = data
        });
      }
    },
    // 打开报警事件弹窗
    openWarningDetails () {
      this.isVisibleSj = true
      this.isVisibleSjType = '2'
      this.getWarningDetailList()
    },
    // 打开报警全部事件弹窗
    openWarningDetailsAll () {
      this.isVisibleSj = true
      this.isVisibleSjType = '1'
      this.getWarningDetailList()
    },
    // 打开滚动报警详情
    openWarningAlarm (config) {
      this.isVisibleXq = true
      this.getAlarmDetailInfo(config)
    },
    // 打开滚动报警更多
    openAlarmDetails () {
      this.isVisibleAlarm20 = true
      this.getAlarmDetail20Info()
    },
    // 打开弹窗报警详情
    openWarningAlarm1 (row) {
      this.isVisibleXq = true
      this.getAlarmDetailInfo1(row)
    },
    // 打开公厕详情
    openWcDetails () {
      this.isVisibleWc = true
      this.getWCDialogInfo()
      // this.getWarningDetailList()
    },
    dialogOpenMap () {
      setTimeout(() => {
        if (!this.mapDialog) {
          this.mapDialogShow()
        }
        this.getPlayback();
      }, 1000)
    },
    dialogCloseMap () {
      this.isVisibleMapPlayback = false
      this.mapDialog.clearOverlays()
    },
    // 末端报警一览
    async initWorkOnStandard_THREE () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_THREE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["完成率", "完成数", "总数"], {
        category: ["一级道路", "二级道路", "三级道路", "四级道路"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [62.68, 57.95, 72.22, 75.97]
        }, {
          data: [84, 142, 273, 351]
        }, {
          data: [134, 245, 378, 462]
        }]

      });
    },
    // 事件报警统计
    async initWorkRatioByCartype (index) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate4());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetAlarmSJBJTJCHQ?ClientNo=" + this.form.clientNo + "&Type=" + (index + 1);
      const { data } = await this.$Http.get(url)
      this.AlarmInfo.AlarmWBJ = data[4].数量
      this.AlarmInfo.AlarmBJZ = data[5].数量
      this.AlarmInfo.AlarmYBJ = data[6].数量
      // this.configwater1.data = [data[0].作业百分比]
      // this.configwater2.data = [data[1].作业百分比]
      // this.configwater3.data = [data[2].作业百分比]
      // this.configwater1 = { ...this.configwater1 }
      // this.configwater2 = { ...this.configwater2 }
      // this.configwater3 = { ...this.configwater3 }
      myChart.setOption({
        graphic: [{
          style: {
            text: data[3].数量
          }
        }],
        legend: {
          data: ["环卫保洁 : " + data[0].数量 + " 次", "垃圾管控 : " + data[1].数量 + " 次", "智慧公厕 : " + data[2].数量 + " 次"]
        },
        series: [{
          data: [
            { "value": data[0].数量, "name": "环卫保洁 : " + data[0].数量 + " 次" },
            { "value": data[1].数量, "name": "垃圾管控 : " + data[1].数量 + " 次" },
            { "value": data[2].数量, "name": "智慧公厕 : " + data[2].数量 + " 次" },]
        },]
      });
    },
    // 大型垃圾处置终端设计能力
    async initWorkOnStandard_ONE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_ONE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(dashBoard());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDataOneRow?sqlName=dlhw&url=CDT_GetHWGFZLInfo '" + this.form.clientNo + "'";
      const { data } = await this.$Http.get(url)
      data.data.forEach(element => {
        if (element.indexOf('作业车辆在线') > -1) {
          this.staticInfo.vehicleOnline = element.split('：')[1]
        }
        if (element.indexOf('清运车辆在线') > -1) {
          this.staticInfo.vehicleLJOnline = element.split('：')[1]
        }
        if (element.indexOf('作业里程') > -1) {
          this.staticInfo.vehicleRunAll = element.split('：')[1]
        }
        if (element.indexOf('作业百分比') > -1) {
          this.staticInfo.vehicleRunRate = element.split('：')[1]
        }
        if (element.indexOf('垃圾收运吨数') > -1) {
          this.staticInfo.rubbishCollection = element.split('：')[1]
        }
        if (element.indexOf('累计处置吨数') > -1) {
          this.staticInfo.rubbishBurn = element.split('：')[1]
        }
      });
      myChart.setOption({
        graphic: {
          style: {
            text: '作业车辆 ' + this.staticInfo.vehicleRunAll,
          }
        },
        series: [{
          data: [
            { "value": this.staticInfo.vehicleRunRate }]
        },]
      });
    },
    // 各区域处理配额
    async initWorkOnStandard_FOUR (index) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FOUR'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbeH3());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDictionaryHorizontalInfo?row0=0&column0=0&sqlName=dlhw&url=exec CDT_GetLJSYQKInfo '" + this.form.clientNo + "'," + (index + 1);
      const { data } = await this.$Http.get(url);
      console.log('data')
      console.log(data)
      myChart.setOption({
        xAxis: {
          axisLabel: {
            formatter: '{value}吨'
          }
        },
        yAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 各区处置量趋势
    async initWorkOnStandard_FIVE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_FIVE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine());
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)
      // 467
      myChart.setOption({

        legend: {
          data: ["河西区", "河东区", "东丽区", "西青区", "津南区", "和平区", "南开区", "河北区", "北辰区", "红桥区"]
        },
        xAxis: {
          data: ["2022-08-26", "2022-08-27", "2022-08-28", "2022-08-29", "2022-08-30"]
        },
        series: [{
          name: '河西区',
          data: [
            '1000', '1120', '1280', '1300', '1103'
          ]
        }, {
          name: '河东区',
          data: [
            '1080', '1452', '1111', '1276', "1040"
          ]
        }, {
          name: '东丽区',
          data: [
            '2200', '3169', '2134', '2896', "2838"
          ]
        }, {
          name: '西青区',
          data: [
            '2200', '1869', '2134', '896', "1546"
          ]
        }, {
          name: '津南区',
          data: [
            '820', '969', '734', '896', "738"
          ]
        }, {
          name: '和平区',
          data: [
            '612', '769', '534', '596', "325"
          ]
        }, {
          name: '南开区',
          data: [
            '720', '369', '534', '896', "543"
          ]
        }, {
          name: '河北区',
          data: [
            '2020', '1569', '2034', '1896', "1865"
          ]
        }, {
          name: '北辰区',
          data: [
            '720', '869', '534', '896', "735"
          ]
        }, {
          name: '红桥区',
          data: [
            '432', '569', '534', '296', "454"
          ]
        },]
      });
    },
    // 环卫作业情况
    async initWorkOnStandard_SIX (index) {
      if (!this.chartSix) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('WorkOnStandard_SIX'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(spotsNumbeH3());
        this.chartSix = myChart
      }
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetVehicleInfoCHQ?ClientNo=" + this.form.clientNo + "&Type=" + (index + 1);
      const { data } = await this.$Http.get(url)
      this.staticInfo.vehicleWorkLongSS = data[0].作业里程
      this.staticInfo.vehicleWorkLongXS = data[1].作业里程
      this.staticInfo.vehicleWorkLongWP = data[2].作业里程
      this.staticInfo.vehicleWorkStandardSS = data[6].作业百分比
      this.staticInfo.vehicleWorkStandardXS = data[7].作业百分比
      this.staticInfo.vehicleWorkStandardWP = data[8].作业百分比
      this.configwater1.data = [data[0].作业百分比]
      this.configwater2.data = [data[1].作业百分比]
      this.configwater3.data = [data[2].作业百分比]
      this.configwater1 = { ...this.configwater1 }
      this.configwater2 = { ...this.configwater2 }
      this.configwater3 = { ...this.configwater3 }
      this.chartSix.setOption({
        xAxis: {
          axisLabel: {
            formatter: '{value}公里'
          }
        },
        yAxis: {
          data: ["洒水车", "洗扫车", "雾炮车"]
        },
        series: [{
          data: [data[3].作业里程, data[4].作业里程, data[5].作业里程]
        }]
      });
    },
    // 各区实际进厂量
    async initWorkOnStandard_EIGHT () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_EIGHT'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      // var url = "http://111.160.78.62:5561/CompanyapiBDEapi/VehicleYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','0000009'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["河西区", "河东区", "东丽区", "西青区", "津南区", "和平区", "南开区", "河北区", "北辰区", "红桥区"]
        },
        series: [{

          data: ["1103", "1040", "2838", "1546", "738", "325", "543", "1865", "735", "454"]
        }]
      });
    },
    // 智慧公厕数据监控-选择公厕
    changeWCIDValue () {
      switch (this.changeWCIndex) {
        case 0:
          {
            this.changeWCValue = "WorkOnStandard_RL";
          }
          break;
        case 1:
          {
            this.changeWCValue = "WorkOnStandard_HJ";
          }
          break;
        case 2:
          {
            this.changeWCValue = "WorkOnStandard_SD";
          }
          break;
      }
      setTimeout(() => {
        this.changeWCSummary(this.changeWCIndex);
      }, 50);
    },
    // 智慧公厕数据监控
    changeWCSummaryValue (index) {
      switch (index) {
        case 0:
          {
            this.changeWCIndex = 0;
            this.changeWCValue = "WorkOnStandard_RL";
          }
          break;
        case 1:
          {
            this.changeWCIndex = 1;
            this.changeWCValue = "WorkOnStandard_HJ";
          }
          break;
        case 2:
          {
            this.changeWCIndex = 2;
            this.changeWCValue = "WorkOnStandard_SD";
          }
          break;
      }
      setTimeout(() => {
        this.changeWCSummary(index);
      }, 50);
    },
    changeWCSummary (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_RL();
            // this.changeOperationName = "处理厂垃圾车辆作业趟次";
          }
          break;
        case 1:
          {
            this.initWorkOnStandard_HJ();
            // this.changeOperationName = "中转站垃圾车辆作业趟次";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_SD();
            // this.changeOperationName = "中转站垃圾车辆作业趟次";
          }
          break;
      }
    },

    //人流趋势
    async initWorkOnStandard_RL () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_RL'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard3());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDictionaryVerticalInfo?row0=0&column0=1&sqlName=dlhw&url=EXEC CDT_GetZHGCSJJKInfo '" + this.form.clientNo + "'," + this.wcID + ",1";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['闲时人流', '忙时人流']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '闲时人流',
          data: data[1],
        }, {
          name: '忙时人流',
          data: data[2]
        }]

      });
    },
    //环境报警
    async initWorkOnStandard_HJ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_HJ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard5());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDictionaryVerticalInfo?row0=0&column0=1&sqlName=dlhw&url=EXEC CDT_GetZHGCSJJKInfo '" + this.form.clientNo + "'," + this.wcID + ",2";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['氨气报警', '硫化氢报警']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '氨气报警',
          data: data[1],
        }, {
          name: '硫化氢报警',
          data: data[2]
        }]

      });
    },//水电消耗
    async initWorkOnStandard_SD () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SD'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard4());
      var url = "http://111.160.78.62:5561/CompanyapiBDEapi/Vehicle/GetDictionaryVerticalInfo?row0=0&column0=1&sqlName=dlhw&url=EXEC CDT_GetZHGCSJJKInfo '" + this.form.clientNo + "'," + this.wcID + ",3";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['消耗水量', '消耗电量']
        },
        xAxis: {
          data: data[0]
        },
        series: [{
          name: '消耗水量',
          data: data[1],
        }, {
          name: '消耗电量',
          data: data[2]
        }]
      });
    },
    clickRowCarCount (row, index) {
      this.isVisibleCarCount = false
      this.carDataForType = row.data
      this.isVisibleTypeCar = true
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index2Note.scss';
//下方区域的布局
.content-box {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: 1260px 1260px 625px 625px;
  grid-template-rows: 320px 150px 150px 320px;
  // grid-template-rows: repeat(3, 320px);
  grid-template-areas:
    'one  two three five'
    'four  two three five'
    'four  two seven eight'
    'six  two seven eight';
  // 'five  eight six'
}
.one {
  margin: 5px;
  grid-area: one;
  background: #112333;
}

.two {
  margin: 5px;
  grid-area: two;
  background: #112333;
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: #112333;
}
.four {
  margin: 5px;
  grid-area: four;
  background: #112333;
}
.five {
  margin: 5px;
  grid-area: five;
  background: #112333;
}
.six {
  margin: 5px;
  grid-area: six;
  background: #112333;
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: #112333;
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: #112333;
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: #112333;
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 18px;
  }
}
.title-text {
  width: 400px;
  font-family: 'SimHei';
  font-weight: bold;
}
.bj {
  margin: 20px;
  padding: 8px;
  background: #0f5a8b;

  border-radius: 5px;
}
.configwater {
  float: left;
  margin: 30px 10px;
}
.twater {
  text-align: center;
  font-family: 'SimHei';
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
}
// .map-button {
//   margin: 10px;
//   position: relative;
//   left: 20px;
//   top: -330px;
//  width:140px;
//   height:50px;
//   // background-image:url("1118.02.png");
//   // background-image: url(../assets/img/iconCD/zhch_btn_1.png);
// }
.nature {
  user-select: none;
  display: inline-block;
  top: 10px;
  position: relative;
  width: 140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}
.carbtnImageA {
  color: #fff;
  background-image: url(../assets/img/iconCD/zhch_btn_2.png);
}
.carbtnImageU {
  color: #18a7dd;
  background-image: url(../assets/img/iconCD/zhch_btn_1.png);
}
.dikuangVideo {
  position: relative;
  top: -1300px;
  left: 1000px;
  width: 250px;
  height: 650px;
}
.videoTitle {
  position: absolute;
  top: 127px;
  left: 10px;
  font-size: 18px;
  color: #fff;
}
.videoBtn {
  background-image: url(../assets/img/iconCD/jiankong_biaoti.png);
  width: 250px;
  height: 150px;
  position: absolute;
  padding-left: 8px;
}
.dikuangCar {
  // position: relative;
  // top: -975px;
  // left: 20px;

  // width: 1200px;
  // height: 60px;
  position: absolute;
  top: 83%;
  left: 34.1%;
  width: 30%;
}
.dikuang {
  //   display:flex;

  // align-item:center;

  // justify-content:center;
  position: absolute;
  top: 90%;
  left: 34.1%;
  width: 30%;
  height: 70px;
  background-image: url(../assets/img/iconCD/zhch_dikuang.png);
}

.map-Checkbox {
  display: inline-block;
  margin: 10px;
  position: relative;
  left: 20px;
  top: -930px;
  .el-cascader-panel.is-bordered {
    border: 0px;
  }
  .el-cascader-menu {
    color: white;
  }
}
.el-checkbox-button__inner {
  color: white;
  background: rgba(21, 27, 31, 0.5);
  border-color: #70c6ee !important;
  border-width: 2px;
}
.el-dialog {
  background-color: rgba(255, 0, 0, 0);
  background-image: url(../assets/img/iconCD/tanchuang_dikuang.png);
  background-size: 100% 100%;
}
.el-dialog__title {
  color: #ffffff;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}

/*地图标题 infoWindow*/
.BMap_bubble_title {
  color: #fff;
  font-size: 18px;
  /*font-weight: bold;*/
  text-align: left;
  background: transparent !important;
}

.BMap_pop .BMap_top {
  background: #061c2f !important;
  border: 0 !important;
}
.BMap_pop .BMap_center {
  // width:251px !important;
  border: 0 !important;
  background: #061c2f !important;
}
.BMap_pop .BMap_bottom {
  border: 0 !important;
  background: #061c2f !important;
}

.BMap_pop div:nth-child(3) {
  background: transparent !important;
}
.BMap_pop div:nth-child(3) div {
  border-radius: 7px;
  background: #061c2f !important;
  border: 0 !important;
}
.BMap_pop div:nth-child(1) {
  border-radius: 7px 0 0 0;
  background: transparent !important;
  border: 0 !important;
}
.BMap_pop div:nth-child(1) div {
  background: #061c2f !important;
}
.BMap_pop div:nth-child(5) {
  border-radius: 0 0 0 7px;
  background: transparent !important;
  border: 0 !important;
}
.BMap_pop div:nth-child(5) div {
  border-radius: 7px;
  background: #061c2f !important;
}
.BMap_pop div:nth-child(7) {
  background: transparent !important;
}
.BMap_pop div:nth-child(7) div {
  border-radius: 7px;
  background: #061c2f !important;
}

.BMap_pop div:nth-child(8) div {
  /*border-radius:7px;*/
  background: #061c2f !important;
}
/*窗体阴影*/
.BMap_shadow {
  display: none;
}
/*下面箭头替换为自己本地修改过的*/
// img[src="http://api0.map.bdimg.com/images/iw3.png"] {
//   // content: url('../img/Screen/arrow.png');
//   content: url('../assets/img/iconCD/arrow.png');
// }
// img[src="https://api.map.baidu.com/images/iw3.png"] {
//   margin-top: -692px !important;
//   filter: alpha(opacity=70);
//   // content: url('../img/Screen/arrow.png');
//   content: url('../assets/img/iconCD/arrow.png');
// }
img[src="http://api.map.baidu.com/images/iw3.png"]
{
  // content: url('../assets/img/iconCD/arrow.png');
  width: 1px !important;
  height: 1px !important;
}
img[src="https://api.map.baidu.com/images/iw3.png"]
{
  opacity: 0.7;
  // margin-top: -692px !important;
  filter: alpha(opacity=70);
  // content: url('../assets/img/iconCD/arrow.png');
  width: 1px !important;
  height: 1px !important;
}

//表格背景
.el-table,
.el-table__expanded-cell {
  background: #12222f;
}
.el-table tr {
  background: #12222f;
}
// 斑马纹颜色
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #126081;
}
.el-table tr:hover {
  background: #126081;
}
// 表格颜色
.el-table tbody tr:hover > td {
  background-color: #3290dd !important;
}
// el-table 去掉边框
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #0d475f;
  border: 0px solid #0d475f;
}
.el-table th.el-table__cell.is-leaf {
  color: #fff;
  background-color: #126081;
  border: 0px solid #126081;
  border-bottom: 0px solid #126081;
}
.el-table td.el-table__cell {
  color: #fff;
  background-color: #061c2f;
  border: 0px solid #061c2f;
  border-bottom: 0px solid #061c2f;
}
.el-popover {
  background-color: #061c2f;
  border: 0px solid #061c2f;
  border-bottom: 0px solid #061c2f;
}
// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
// 鼠标悬停
// .el-table tbody tr:hover > td {
//   background-color: #061c2f !important; //修改成自己想要的颜色即可
// }
.wcbox {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(3, 33%);
  grid-template-rows: 5%, 95%;
  grid-template-areas:
    'wcfour wcfour wcfour'
    'wcone wctwo wcthree';
}
.wcone {
  margin: 5px;
  grid-area: wcone;
}

.wctwo {
  margin: 5px;
  grid-area: wctwo;
}
.wcthree {
  margin: 5px;
  grid-area: wcthree;
}
.wcfour {
  margin: 5px;
  grid-area: wcfour;
}
.bg-purple1 {
  color: #fff;
  background-color: #126081;
  font-weight: bolder;
  font-size: 16px;
  line-height: 35px;
  padding: 10px;
}
.bg-purple2 {
  color: #fff;
  background-color: #126081;
  // font-weight: bolder;
  font-size: 16px;
  line-height: 35px;
  padding: 10px;
  text-align: center;
}
.bg-purple3 {
  color: #1ba7dd;
  background-color: #126081;
  font-weight: bolder;
  font-size: 16px;
  line-height: 35px;
  padding: 10px;
  text-align: right;
}
.bg-purple4 {
  color: #d1d3d3;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 18px;
  line-height: 30px;
  padding: 10px;
  text-align: left;
}
.bg-purple5 {
  color: #1ba7dd;
  // background-color: #126081;
  // font-weight: bolder;
  font-size: 20px;
  line-height: 35px;
  padding: 10px;
  text-align: center;
}
.bg-purple6 {
  color: #d1d3d3;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 18px;
  line-height: 35px;
  padding: 10px;
  text-align: center;
}
.bg-purple7 {
  color: #ff4646;
  // background-color: #126081;
  // font-weight: bolder;
  font-size: 18px;
  line-height: 30px;
  padding: 10px;
  text-align: left;
}
.bg-purple8 {
  color: #22ff68;
  // background-color: #126081;
  // font-weight: bolder;
  font-size: 18px;
  line-height: 30px;
  padding: 10px;
  text-align: left;
}
.bg-purple9 {
  color: #cfc24a;
  // background-color: #126081;
  // font-weight: bolder;
  font-size: 18px;
  line-height: 30px;
  padding: 10px;
  text-align: left;
}
.bg-purple10 {
  text-align: center;
  margin-bottom: -15px;
}
.bg-purple11 {
  color: #fff;
  // background-color: #061c2f;
  // font-weight: bolder;
  font-size: 18px;
  line-height: 45px;
  margin: 17px;
  text-align: center;
}
.gfth {
  color: #1ba7dd;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 25px;
  line-height: 30px;
  margin: 0 0 10px 0;
  text-align: center;
}
.gftd {
  color: #fff;
  // background-color: #126081;
  // font-weight: bolder;
  margin-top: 5px;
  font-size: 18px;
  line-height: 35px;
  text-align: center;
}
.wcth {
  color: #fff;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
}
.wctd {
  color: #fff;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}
.wcth1 {
  color: #1ba7dd;
  // background-color: #126081;
  font-weight: bolder;
  font-size: 23px;
  line-height: 30px;
  text-align: center;
}
.wctd1 {
  color: #fff;
  // background-color: #126081;
  // font-weight: bolder;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
.wcimg {
  width: 22px;
  height: 22px;
  margin: 0 10px;
  top: 5px;
}
.xlimg {
  width: 600px;
  height: 3px;
  margin: 10px 0;
  text-align: center;
}
.thumbnail {
  float: left;
  // width:90px;
  // height:90px;
  margin: 10px;
}
.el-tabs__item {
  color: #fff;
}
.el-input-group__append {
  background: rgba(8, 48, 74, 0.5) !important;
  color: #71c9ee !important;
  border-color: #71c9ee !important;
}
</style>
